Cómo comprimir imágenes para webs (guía de velocidad)

Tu web tiene un problema de velocidad. Y el culpable son casi seguro tus imágenes.

Las imágenes suponen más de la mitad del peso total de la mayoría de páginas web. Una sola foto sin optimizar puede pesar más que todo tu HTML, CSS y JavaScript juntos. Ese peso extra ralentiza la carga, frustra a los visitantes y perjudica tu posicionamiento en buscadores.

¿La buena noticia? Comprimir imágenes es rápido, fácil y los resultados son enormes. Esta guía te muestra exactamente cómo comprimir imágenes para la web. Los ajustes correctos, los formatos adecuados y el flujo de trabajo para conseguir los archivos más pequeños sin pérdida visible de calidad.

¿Por qué las imágenes sin comprimir hacen tu web más lenta?

Cada vez que alguien visita tu página, su navegador descarga cada imagen. Archivos más grandes tardan más en descargarse. Descargas más largas significan páginas más lentas.

Algunas cifras típicas. Una foto directo de cámara puede pesar 5-8 MB. Una captura de pantalla de una pantalla retina puede ser 2-3 MB. Incluso imágenes exportadas de herramientas de diseño como Figma o Canva suelen pesar 500 KB a 1 MB.

Ahora multiplica eso por el número de imágenes de tu página. Un post de blog con 5 fotos sin optimizar puede pesar fácilmente 15-25 MB solo en imágenes. En una conexión móvil, eso tarda más de 10 segundos en cargar. La mayoría de visitantes se van a los 3 segundos.

Los datos de Google muestran que cuando el tiempo de carga pasa de 1 a 3 segundos, la probabilidad de rebote aumenta un 32%. De 1 a 5 segundos, sube un 90%. Las imágenes pesadas son la razón principal por la que las páginas cruzan esos umbrales.

La compresión resuelve esto. Una imagen bien comprimida se ve casi igual que la original pero pesa un 80-95% menos. Esa foto de producto de 5 MB se convierte en 150 KB. Tu página carga en 2 segundos en vez de 8.

¿Qué ajuste de calidad deberías usar para imágenes web?

El control de calidad es el ajuste más importante al comprimir imágenes. Demasiado alto y los archivos siguen grandes. Demasiado bajo y se ven mal. Así encuentras el punto ideal.

Para fotografías (fotos de producto, imágenes de blog, fondos), usa calidad 75-85%. En este rango, los archivos JPEG y WebP son un 80-90% más pequeños que el original. La diferencia de calidad es invisible para la mayoría de personas en pantalla.

Al 85%, no puedes notar la diferencia con el original. Al 75%, puede haber una suavidad mínima en áreas muy detalladas, pero apenas se nota. Por debajo del 60% es donde empiezan a aparecer artefactos. Patrones en bloques alrededor de bordes. Bandas de color en degradados. Detalles finos difuminados.

Para gráficos e ilustraciones (iconos, logos, diagramas), no uses compresión con pérdida. Usa PNG para bordes nítidos y texto. Si el tamaño importa, convierte a WebP sin pérdida. Un WebP sin pérdida es típicamente un 25% más pequeño que el mismo PNG.

Para capturas de pantalla, usa PNG o WebP con calidad 90%+. El texto en capturas se vuelve borroso con demasiada compresión. Si la captura contiene texto legible, mantén la calidad alta o usa sin pérdida.

Aquí tienes una tabla de referencia rápida:

Tipo de imagen	Formato	Calidad	Tamaño esperado
Foto de producto	WebP o JPEG	75-85%	50-200 KB
Imagen hero del blog	WebP o JPEG	80-85%	100-200 KB
Miniatura	WebP o JPEG	70-80%	15-50 KB
Logo/icono	PNG o SVG	Sin pérdida	5-30 KB
Captura de pantalla	PNG o WebP	90-100%	100-400 KB

Estos objetivos funcionan para la mayoría de webs. Intenta estar por debajo de 200 KB por imagen y por debajo de 100 KB cuando puedas.

¿Deberías redimensionar las imágenes antes de comprimir?

Sí. Siempre. Redimensionar es la mayor ganancia en tamaño de archivo, y la mayoría de gente se lo salta.

Por qué importa tanto. Una foto de un smartphone moderno tiene 4000x3000 píxeles. Tu blog la muestra a 800px de ancho. Eso significa que estás enviando 15 veces más píxeles de los que necesita la pantalla. Todos esos datos extra se descargan y se tiran.

Redimensiona la imagen a su tamaño de visualización primero. Luego comprime. Los resultados son enormes.

Toma esa foto de 4000x3000 de 5 MB:

1. Redimensiona a 1200px de ancho (bien para la mayoría de blogs): baja a ~1 MB
2. Comprime como WebP al 80% de calidad: baja a ~100 KB
3. Elimina metadatos: ahorra otros 20-30 KB

Resultado final: unos 80 KB. Eso es un 98% menos que los 5 MB originales.

Para pantallas retina, sirve imágenes al doble del tamaño de visualización. Si tu columna de blog tiene 600px de ancho, redimensiona a 1200px. Los píxeles extra hacen que la imagen se vea nítida en pantallas de alta densidad sin desperdiciar tanto como los 4000px originales.

No te olvides de las imágenes responsivas. Usa srcset para servir diferentes tamaños según el ancho de pantalla. Un usuario móvil en una pantalla de 375px no necesita una imagen de 1200px.

<img
  src="/foto-800.webp"
  srcset="/foto-400.webp 400w, /foto-800.webp 800w, /foto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Foto de producto"
>

Esto entrega la imagen del tamaño correcto a cada dispositivo. Los usuarios móviles reciben archivos más pequeños. Los de escritorio reciben calidad completa. Todos obtienen una página más rápida.

¿Cuál es el mejor formato de imagen para la velocidad web?

La elección de formato tiene un gran impacto en el tamaño de archivo. La misma foto guardada en diferentes formatos puede variar un 50% o más.

WebP es la mejor opción general para imágenes web hoy. Comprime un 25-35% mejor que JPEG. Soporta compresión con y sin pérdida. Maneja transparencia. Y más del 97% de los navegadores lo soportan.

JPEG sigue siendo el formato más usado para fotos. Comprime bien y funciona en todas partes. Si no estás listo para pasarte a WebP, JPEG al 75-85% de calidad sigue siendo buena opción.

PNG es mejor para imágenes que necesitan transparencia o precisión perfecta. Logos, iconos, capturas con texto. Pero los archivos PNG son 3-5 veces más grandes que JPEGs equivalentes para fotos. No uses PNG para fotografías.

AVIF ofrece las mejores ratios de compresión disponibles. Hasta un 50% más pequeño que JPEG. Pero la codificación es más lenta y el soporte de navegadores aún no es universal. Vale la pena probarlo si tu stack lo soporta.

Para una mirada más profunda a cómo funciona cada formato, consulta nuestra guía completa de compresión de imágenes. Cubre con pérdida vs. sin pérdida, cuándo usar cada formato y cómo evitar errores comunes.

¿Cómo comprimir muchas imágenes de forma eficiente?

Comprimir una imagen a la vez está bien para un arreglo rápido. Pero si estás optimizando toda una web, necesitas un flujo de trabajo más rápido.

Opción 1: Usa un compresor por lotes online. Herramientas como CompressIMG te permiten subir hasta 20 imágenes a la vez. Ajusta la calidad, comprime y descarga como ZIP. Sin software que instalar. Sin necesidad de cuenta.

Es la opción más rápida para la mayoría de gente. Sube tus imágenes del blog, pon la calidad al 80% y descarga el lote comprimido. Todo el proceso tarda menos de un minuto.

Opción 2: Usa herramientas de build para compresión automática. Si eres desarrollador, añade optimización de imágenes a tu pipeline de build. Next.js, Astro y otros frameworks tienen optimización de imágenes integrada. Redimensionan, comprimen y convierten imágenes automáticamente.

Opción 3: Usa una API para flujos de trabajo automáticos. Si tu web maneja subidas de usuarios o tira de imágenes de un CMS, quieres que la compresión ocurra automáticamente. Una API de compresión de imágenes procesa archivos programáticamente. Sin pasos manuales.

Opción 4: Usa un CDN con optimización automática. Servicios como Cloudflare, Imgix y Cloudinary pueden comprimir y redimensionar imágenes al vuelo. Subes el original y el CDN sirve versiones optimizadas según el dispositivo y navegador del visitante.

Para la mayoría de webs enfocadas en contenido, la Opción 1 cubre la necesidad. Sube tus imágenes, comprímelas y listo. Para webs más grandes con actualizaciones frecuentes, las opciones 2-4 ahorran tiempo automatizando el proceso.

La comparación de TinyPNG, Squoosh y CompressIMG desglosa qué herramienta encaja en cada flujo de trabajo. Algunas procesan por lotes. Algunas te dan control profundo sobre los ajustes. Elige la que se adapte a tu forma de trabajar.

¿Qué tamaño de archivo deberías buscar para cada tipo de imagen?

Buenos objetivos te ayudan a saber cuándo una imagen está "lista". Aquí tienes valores de referencia realistas:

Imágenes hero y banners a ancho completo: Menos de 200 KB. Son las imágenes más grandes de la página y normalmente el elemento LCP. Mantenerlas bajo 200 KB ayuda a tus puntuaciones de Core Web Vitals.

Imágenes de posts de blog: Menos de 100 KB. Las imágenes de contenido dentro de columnas de texto no necesitan ser enormes. 800-1200px de ancho al 80% de calidad alcanza este objetivo fácilmente.

Miniaturas de productos: Menos de 50 KB. Imágenes pequeñas en cuadrículas o carruseles. Redimensiona al tamaño de visualización (normalmente 300-400px) y comprime al 70-80%.

Iconos y logos: Menos de 20 KB. Gráficos simples con pocos colores. Usa SVG cuando sea posible. Si no, PNG o WebP sin pérdida.

Peso total de imágenes de la página: Menos de 500 KB para el viewport inicial. Las imágenes con lazy load debajo del pliegue no cuentan para la carga inicial, pero sí afectan al total de datos transferidos.

Google PageSpeed Insights señala imágenes que podrían optimizarse más. Después de comprimir, ejecuta el test para ver si alguna imagen necesita más trabajo. La sugerencia "Servir imágenes en formatos de nueva generación" significa que deberías pasar de JPEG o PNG a WebP o AVIF.

¿Comprimir imágenes reduce la calidad?

Esta es la preocupación más habitual. Y la respuesta honesta es: sí, técnicamente. Pero no, visualmente no.

La compresión con pérdida elimina datos. Así es como hace los archivos más pequeños. Pero los algoritmos modernos son inteligentes sobre lo que eliminan. Quitan detalles que tus ojos no pueden ver. Variaciones de color diminutas. Patrones sub-píxel. Datos que importan a los ordenadores pero no a los humanos.

Al 80% de calidad, un JPEG o WebP comprimido es visualmente idéntico al original en pantalla. Tendrías que hacer zoom al 400% y comparar píxel a píxel para notar diferencias. Ningún visitante lo notará jamás.

La calidad a la que los artefactos se hacen visibles depende del contenido de la imagen. Las fotos con degradados suaves toleran más compresión que las imágenes con bordes nítidos y texto. Por eso la calidad recomendada varía según el tipo de imagen.

La regla clave: empieza siempre desde tu fuente de mayor calidad. No recomprimas un JPEG ya comprimido. Cada ronda de compresión con pérdida degrada más la calidad. Si solo comprimes una vez desde el original, la calidad se mantiene excelente.

Usa una herramienta con vista previa lado a lado para revisar los resultados antes de descargar. CompressIMG muestra la imagen original y la comprimida con un control deslizante que puedes arrastrar. Si ves diferencia, sube la calidad. Si no la ves, ya está.

¿Listo para acelerar tu web?

La compresión de imágenes es la forma más rápida de hacer que tu web cargue más rápido. Lleva minutos, no cuesta nada y las mejoras son medibles.

Empieza con tus imágenes más grandes. Tus banners hero, fotos de producto e imágenes de blog. Redimensiónalas a su tamaño de visualización. Comprime al 75-85% de calidad. Convierte a WebP si puedes.

CompressIMG se encarga de todo en tu navegador. Sube hasta 20 imágenes, ajusta tu calidad y descarga archivos optimizados. Sin necesidad de cuenta.

Una web más rápida significa visitantes más contentos, mejor posicionamiento y más conversiones. Tus imágenes son el arreglo más rápido.