Compresión por Lotes de Imágenes para Desarrolladores Web | Bulk Image Compressor

Published December 18, 2025

Las imágenes son los activos más pesados en la mayoría de los sitios web. En una página promedio, representan entre el 40 y el 60% del peso total. Si eres desarrollador web y no estás comprimiendo imágenes, estás distribuyendo páginas infladas por más limpio que sea tu código.

La pregunta no es si comprimir. Es en qué parte de tu flujo de trabajo debe ocurrir la compresión y qué herramienta se adapta a cada situación.

Dónde encaja la compresión de imágenes en un flujo de trabajo de desarrollo

Hay tres puntos principales donde puedes comprimir imágenes durante el desarrollo:

Antes del commit. Optimizas imágenes localmente antes de que entren al control de versiones. Esto mantiene tu repositorio liviano y significa que todos los entornos (staging, producción, máquinas de otros desarrolladores) obtienen las versiones optimizadas automáticamente.

Durante el build. Herramientas de build como Vite o webpack manejan la compresión como parte del pipeline de activos. Las imágenes fuente permanecen a máxima calidad en el repositorio, y el proceso de build genera versiones optimizadas para el despliegue.

En la capa CDN. Servicios como Cloudflare, Imgix o Cloudinary transforman y comprimen imágenes sobre la marcha según el dispositivo y navegador que solicita.

Cada enfoque tiene sus ventajas y desventajas, y puedes combinarlos.

Herramientas online vs plugins de build

Para una tarea rápida y puntual, como comprimir un lote de capturas de pantalla para una entrada de blog o optimizar un conjunto de iconos, una herramienta online es la opción más rápida. Abre Bulk Image Compressor, arrastra tus archivos, ajusta la calidad y descarga. Listo en menos de un minuto.

Los plugins de build manejan la optimización continua automáticamente. Así es como se ve en la práctica.

Vite

Los usuarios de Vite pueden usar vite-plugin-imagemin o plugins similares:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

Esto comprime las imágenes durante vite build. Los archivos fuente permanecen intactos. El directorio de salida recibe las versiones optimizadas.

webpack

Con webpack, image-minimizer-webpack-plugin hace el mismo trabajo:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

Cuándo usar cada uno

Usa una herramienta online cuando:

Estás añadiendo un puñado de imágenes a un proyecto y quieres optimizarlas ahora mismo
Estás trabajando con contenido de un cliente o diseñador que envió archivos sin optimizar
Tu proyecto no tiene un paso de build (HTML estático, sitios simples)
Quieres verificar visualmente los resultados de compresión antes de hacer commit

Usa plugins de build cuando:

Tu proyecto ya tiene un pipeline de build
Múltiples desarrolladores contribuyen con imágenes y quieres una optimización consistente
Necesitas conversión de formato (ej. generar versiones WebP automáticamente)
Quieres las imágenes fuente a máxima calidad en el repositorio para posible reprocesamiento futuro

Optimización de imágenes en CI/CD

Los plugins de build se ejecutan durante builds locales, pero también puedes añadir optimización de imágenes a tu pipeline de CI/CD. Esto detecta imágenes no optimizadas que se cuelan, sin importar quién las haya subido.

Un enfoque simple es ejecutar un script en tu pipeline de CI que verifique los tamaños de archivo de imagen:

# Falla el build si alguna imagen supera los 500KB
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "Se encontraron imágenes sobredimensionadas. Comprime antes de desplegar."
  exit 1
fi

Para compresión automatizada en CI, herramientas como sharp-cli o imagemin-cli pueden procesar imágenes como un paso del build. Esto garantiza que nada llegue a producción sin comprimir.

Lazy loading e imágenes responsive

La compresión por sí sola no es suficiente. Cómo cargas las imágenes también importa.

Lazy loading difiere las imágenes fuera de pantalla hasta que el usuario se desplaza hacia ellas. Añade loading="lazy" a cada imagen debajo del pliegue. No apliques lazy loading a tu hero image ni a ningún contenido visible en la carga inicial de la página, ya que eso perjudicará tu puntuación de Largest Contentful Paint.

Imágenes responsive sirven diferentes tamaños según el ancho de pantalla. Un teléfono no necesita una imagen de 2400px destinada a un monitor de escritorio. Usa los atributos srcset y sizes para que el navegador elija la versión correcta:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="Foto del producto"
  width="1600"
  height="1067"
  loading="lazy"
>

Genera estas variantes de tamaño como parte de tu proceso de build o con una herramienta por lotes antes de subir.

Entrega con CDN

Una CDN (Red de Entrega de Contenidos) sirve imágenes desde servidores geográficamente cercanos a tus visitantes. Esto reduce la latencia, pero algunas CDN van más allá con optimización de imágenes sobre la marcha.

Cloudflare Image Resizing puede redimensionar y convertir imágenes a WebP o AVIF automáticamente según el navegador del visitante. No necesitas generar las variantes tú mismo.

Imgix y Cloudinary son CDN de imágenes dedicadas. Subes una fuente de alta calidad y ellos generan el tamaño, formato y calidad que solicites mediante parámetros en la URL. Esto es potente pero añade un costo por imagen.

Para la mayoría de los proyectos, comprimir imágenes antes de subirlas y servirlas a través de una CDN estándar (Cloudflare, Fastly, AWS CloudFront) es suficiente. Las CDN de imágenes dedicadas tienen sentido cuando tienes miles de imágenes subidas por usuarios y necesitas redimensionamiento dinámico. Para más contexto sobre por qué la compresión es importante para la web, nuestra guía sobre por qué las imágenes web necesitan compresión cubre los fundamentos.

Errores comunes que cometen los desarrolladores

Subir imágenes sin optimizar. Un JPEG de 5MB en tu repositorio permanece allí en el historial de git para siempre, incluso si lo reemplazas después. Comprime antes de hacer commit.

Usar PNG para fotografías. Los PNG están diseñados para gráficos, capturas de pantalla e imágenes con transparencia. Una fotografía guardada como PNG suele ser de 3 a 5 veces más grande que la misma imagen como JPEG o WebP. Usa el formato correcto para el tipo de contenido. Consulta nuestra guía de comparación de formatos para más detalles.

Omitir los atributos de ancho y alto. Sin dimensiones explícitas, el navegador no sabe cuánto espacio reservar para una imagen hasta que se carga. Esto causa cambios de layout, lo que perjudica tu puntuación CLS y molesta a los usuarios.

Sobrecomprimir. Bajar la calidad al 30 o 40% para obtener archivos pequeños produce artefactos visibles. Para imágenes web, una calidad del 75 al 82% logra el equilibrio adecuado entre tamaño y apariencia.

Ignorar las dimensiones de la imagen. Comprimir una foto de 4000px al 80% de calidad está bien, pero si se muestra a 600px de ancho en tu página, sigues enviando muchos más píxeles de los necesarios. Redimensiona primero a tus dimensiones de visualización, luego comprime.

No usar WebP. El soporte de navegadores para WebP es universal hoy en día. Si sigues sirviendo solo JPEG y PNG, estás dejando de ahorrar entre un 25 y un 35% de tamaño de archivo.

Un enfoque práctico

Para la mayoría de los proyectos web, esto es lo que funciona bien:

Redimensiona y comprime las imágenes antes de hacer commit, usando una herramienta online como Bulk Image Compressor o un script local.
Añade un plugin de build como red de seguridad para detectar cualquier cosa que se haya escapado.
Usa lazy loading e imágenes responsive en tu HTML.
Sirve a través de una CDN.

No necesitas hacer los cuatro desde el primer día. Empieza con el primer paso. Solo eso marcará una diferencia notable en tus tiempos de carga de página.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor