Cómo comprimir imágenes para tu página web: formato, calidad, tamaño y la imagen que no hay que diferir

Una foto recién salida del teléfono puede pesar más que todo el resto de la página. Si la subes así, el visitante espera a que baje una imagen de miles de píxeles para verla en una pantalla de 400. Comprimir es guardar la misma imagen en un archivo más chico, sin que se note.

Esto es lo que dicen web.dev, la documentación de Chrome y de Lighthouse, Google Search Central, MDN, el W3C y la documentación de WordPress y de Squarespace, consultados el 11 de octubre de 2026.

Por qué importa

El LCP, la métrica de Google que mide cuánto tarda en aparecer el contenido principal, cuenta las imágenes entre los elementos que mide: si la imagen del inicio es lo más grande de la pantalla, es la que cuenta → Core Web Vitals.

Lighthouse, la herramienta de auditoría de Chrome que usa PageSpeed Insights, lo revisa así: comprime cada imagen con calidad 85 y, si eso ahorraría 4 KiB o más, la marca como optimizable.

El formato

• Fotos: JPEG, o mejor WebP. Según web.dev, WebP comprime mejor que los formatos anteriores y conviene usarlo siempre que se pueda, con otro formato de respaldo si hace falta.
• AVIF, más nuevo, también está admitido: WordPress lo acepta desde la versión 6.5, y Google Imágenes lo indexa.
• Gráficos con transparencia: PNG.
• Logos, íconos y texto: un formato vectorial como SVG, que se ve nítido en cualquier resolución. No sirve para fotos.
• GIF animado: mejor un video. El GIF tiene como máximo 256 colores y pesa mucho más que un elemento de video.

Para Google Imágenes, los formatos admitidos son BMP, GIF, JPEG, PNG, WebP, SVG y AVIF, y la extensión del archivo tiene que coincidir con su tipo.

Cuánto comprimir

Hay dos tipos de compresión: con pérdida, que elimina datos de la imagen, y sin pérdida, que la guarda igual pero en menos espacio. Y web.dev es claro sobre la calidad: «no existe una configuración universal». Depende de la imagen y de cuánto artefacto aceptas a cambio de un archivo más chico.

Si necesitas un número para empezar, el de Lighthouse: calidad 85. Para probar, Squoosh, de Google Chrome Labs, es una aplicación web de código abierto que comprime imágenes en varios formatos.

El tamaño en píxeles

• Del tamaño en que se muestra. Una imagen de 4000 píxeles para un espacio de 800 desperdicia casi todo lo que baja. Con los atributos srcset y sizes, el navegador elige la versión justa para cada pantalla.
• Siempre con width y height. web.dev pide incluir esos atributos en las imágenes, para que el navegador reserve el espacio y el contenido no salte mientras carga.
• Una referencia de plataforma: Squarespace recomienda subir imágenes de 500 KB o menos, con un ancho de 2500 píxeles para la mayoría, y pone un límite de 20 MB.

Carga diferida, pero no en la primera imagen

Con loading="lazy", el navegador baja una imagen recién cuando el visitante se acerca a ella: ideal para las de más abajo. Pero web.dev advierte: «Siempre carga de forma anticipada las imágenes visibles en el primer viewport». En su análisis, la página mediana sin carga diferida tenía un LCP de 2,922 milisegundos, contra 3,546 de la página mediana con carga diferida. Diferir la imagen principal la retrasa.

Lo que ya hacen las plataformas

• WordPress achica solo las imágenes de más de 2560 píxeles desde la versión 5.3, acepta WebP desde la 5.8 y AVIF desde la 6.5, y difiere la carga de imágenes desde la 5.5.
• Squarespace genera las versiones redimensionadas a partir de lo que subes; por eso pide el ancho de 2500 píxeles.

Aun así, conviene comprimir antes de subir: es la parte que controlas tú. Y revisarlo cada tanto es parte del mantenimiento → mantenimiento de una página web.

El texto alternativo

Google pide nombres de archivo, títulos y textos alternativos descriptivos: cachorro-golden.jpg dice más que IMG_2045.jpg. Y según el árbol de decisión del W3C, una imagen solo decorativa lleva el texto alternativo vacío (alt=""), para que el lector de pantalla la salte.

Fuentes oficiales

• Elegir el formato de imagen correcto, comprimir imágenes, Largest Contentful Paint, optimizar el CLS, la carga diferida de imágenes y los efectos de demasiada carga diferida — web.dev.
• Efficiently encode images — Chrome for Developers, en inglés; Squoosh — Google Chrome Labs.
• Prácticas recomendadas de SEO para imágenes y el soporte de AVIF — Google Search Central.
• Imágenes responsivas — MDN; el árbol de decisión del texto alternativo — W3C, en inglés.
• Imágenes grandes en WordPress 5.3, WebP en 5.8, AVIF en 6.5 y la carga diferida en 5.5 — WordPress, en inglés; formato de imágenes — Squarespace.