Cómo optimizar imágenes para web sin perder calidad

Para optimizar imágenes para web sin pérdida visible, haz cinco cosas: exporta cada imagen al tamaño en píxeles al que se muestra (más o menos el doble para pantallas nítidas), elige un formato moderno como AVIF o WebP, comprime a una calidad moderada y compara a ojo, sirve varios tamaños con srcset y aplica carga diferida a todo lo que esté bajo el pliegue. Esos pasos eliminan la mayoría de los avisos de imágenes en Lighthouse y suelen reducir muchísimo el peso de la página, porque la foto original recién salida de una cámara o de una herramienta de diseño es muchas veces más grande de lo que necesita la pantalla.

Paso 1: exporta al tamaño al que se muestra

Una imagen que se muestra a 800 píxeles de ancho no necesita medir 4.000. Lighthouse marca las imágenes sobredimensionadas porque esos píxeles de más se descargan, se decodifican y se tiran. Mide el ancho máximo con el que aparece la imagen en tu diseño y exporta aproximadamente al doble de ese ancho para móviles y portátiles de alta densidad. Pasar de dos veces rara vez se ve más nítido y siempre cuesta bytes.

Paso 2: elige el formato adecuado

El formato importa más que cualquier control de compresión. AVIF suele dar el archivo más pequeño, WebP se acerca y funciona en todos los navegadores actuales, y JPEG y PNG siguen siendo las alternativas seguras. WebP vs PNG y PNG vs JPG profundizan en cada pareja.

Paso 3: comprime y después mira

Los formatos con pérdida tienen un ajuste de calidad, y el valor correcto depende de la imagen. Empieza en torno a 75 u 80 para WebP y en torno a 50 o 60 para AVIF, exporta y compara con el original al 100% de zoom. Bájalo hasta que notes una diferencia y luego sube un paso. Las caras, el texto fino y los degradados necesitan más calidad que los paisajes recargados. Compresión de imágenes explica qué descarta el codificador.

Ya que estás, elimina metadatos como los datos de la cámara y las miniaturas incrustadas. La mayoría de herramientas de exportación lo hacen con una casilla, y quita bytes que nadie ve.

Paso 4: marcado responsive con srcset y sizes

Con varios anchos exportados, deja que elija el navegador. srcset enumera los archivos y sus anchos; sizes le dice al navegador con qué ancho aparecerá la imagen. Así el navegador descarga el archivo más pequeño que sea lo bastante nítido para esa pantalla.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

Para una imagen dentro de una columna, describe el diseño en sizes, por ejemplo sizes="(min-width: 1024px) 720px, 100vw". Equivocarse con sizes es la razón más común por la que una configuración responsive sigue descargando el archivo grande.

Paso 5: las indicaciones de carga que importan

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Estas indicaciones se corresponden directamente con las Core Web Vitals. La imagen de cabecera suele ser el elemento Largest Contentful Paint, que según web.dev debería mostrarse en menos de 2,5 segundos, y la falta de dimensiones es una causa clásica de desplazamientos del diseño. Si tu cabecera es un vídeo en lugar de una imagen, el mismo razonamiento se aplica en vídeos de fondo para webs.

Lista de comprobación antes de publicar

1. 1

   Mide el hueco

   Averigua el ancho máximo con el que se muestra cada imagen en tu diseño.

2. 2

   Exporta a los tamaños correctos

   Entre una y dos veces el ancho del hueco, más versiones pequeñas para móviles.

3. 3

   Elige el formato

   AVIF o WebP para fotos y degradados, SVG para logos, PNG solo cuando gane.

4. 4

   Comprime a ojo

   Baja la calidad hasta que veas un cambio y luego súbela un paso.

5. 5

   Escribe el marcado

   srcset, sizes, width, height, alt y carga diferida bajo el pliegue.

6. 6

   Pruébalo

   Pasa Lighthouse en una ventana de incógnito y revisa las auditorías de imágenes y el elemento LCP.

Gran parte de esto es más fácil si la imagen se crea desde el principio a su tamaño final. En Gradiently diseñas una vez y Pro adapta el diseño a todos los tamaños en un paso, y luego exporta PNG, JPG o SVG con dimensiones exactas hasta 4K, así que la cabecera, el banner y la imagen Open Graph parten del tamaño con el que se mostrarán.