Optimización de imágenes para Core Web Vitals y LCP

Las imágenes suelen ser el mayor contribuyente al peso de una página web. Como la velocidad afecta directamente a la experiencia y al posicionamiento, optimizarlas es una de las acciones de mayor impacto. Google lo mide con los Core Web Vitals, y las imágenes están en el centro de dos de ellos.

Cómo afectan las imágenes a los Core Web Vitals

El LCP (Largest Contentful Paint) mide cuánto tarda en renderizarse el elemento visible más grande. En la mayoría de páginas ese elemento es una imagen de cabecera, así que una imagen pesada y lenta dispara el LCP. El objetivo es menos de 2,5 segundos.

El CLS (Cumulative Layout Shift) mide los movimientos inesperados del contenido durante la carga. Si una imagen no declara dimensiones, el navegador no reserva su espacio y todo salta cuando llega. Ambos problemas tienen solución con unas pocas técnicas.

1. Usa un formato moderno

Pasar de JPEG o PNG a WebP o AVIF suele recortar el tamaño un 25–50% con la misma calidad visual. Archivos más pequeños se descargan antes, lo que baja directamente el LCP. Convertir una carpeta entera de golpe — como permite Scrunch — es la forma más rápida de aplicarlo a todo el sitio.

2. Sirve las imágenes a su tamaño de visualización

Un error muy común: subir una foto de 4000 píxeles y mostrarla en un contenedor de 800. El navegador descarga igualmente el archivo completo. Redimensiona las imágenes aproximadamente al tamaño en que se muestran (hasta 2x para pantallas retina) y el ahorro es drástico.

3. Usa imágenes responsivas

El atributo srcset permite al navegador elegir la imagen adecuada para cada pantalla. Un móvil no debería descargar la cabecera de escritorio. Ofrecer varios anchos asegura que las pantallas pequeñas reciban archivos pequeños — clave para los Core Web Vitals móviles.

4. Carga diferida para lo que no se ve

Pero nunca en la imagen principal

Añadir loading="lazy" a las imágenes bajo el pliegue las pospone hasta que hagan falta, ahorrando ancho de banda. Eso sí: la imagen LCP de arriba debe cargar de inmediato — idealmente con fetchpriority="high" — para aparecer lo antes posible.

5. Reserva espacio para evitar saltos

Define siempre los atributos width y height (o un aspect-ratio en CSS). Así el navegador reserva el espacio correcto antes de que cargue la imagen y desaparece el salto que castiga al CLS.

Lista rápida

• Convierte las imágenes a WebP o AVIF
• Redimensiona al tamaño real de visualización (~2x para retina)
• Ofrece anchos responsivos con srcset
• Carga diferida bajo el pliegue
• Prioriza la imagen LCP/cabecera
• Define width y height para evitar saltos

Formato y tamaño son la base: empieza por ahí. Scrunch se encarga de la parte de conversión y compresión, con muchas imágenes a la vez en tu navegador.