Cómo optimizar imágenes para Core Web Vitals

Tu web carga lento. Haces un test con Lighthouse. El informe dice que tus imágenes son el problema.

Ese valor rojo de "Largest Contentful Paint"? Casi siempre lo causan imágenes sin optimizar. Y Google usa ese valor para posicionar tu web.

Los Core Web Vitals son las métricas que más le importan a Google. Las imágenes afectan a la más grande. Optimiza tus imágenes y tus puntuaciones suben. Aquí te explico exactamente cómo hacerlo.

¿Qué son los Core Web Vitals y por qué importan las imágenes?

Los Core Web Vitals son tres métricas de rendimiento que Google mide en cada página:

• Largest Contentful Paint (LCP): Lo rápido que carga el elemento visible más grande. Debería estar por debajo de 2,5 segundos.
• Interaction to Next Paint (INP): Lo rápido que la página responde al hacer clic o tocar. Debería estar por debajo de 200 milisegundos.
• Cumulative Layout Shift (CLS): Cuánto salta el diseño de la página mientras carga. Debería estar por debajo de 0,1.

Las imágenes afectan directamente a dos de estas tres métricas. Una imagen hero pesada arruina tu LCP. Una imagen sin dimensiones fijas causa cambios de diseño que perjudican tu CLS.

¿Por qué importa esto para tu negocio? Google confirmó que los Core Web Vitals son un factor de posicionamiento. Las páginas con buenas puntuaciones reciben más tráfico orgánico. Las páginas con malas puntuaciones bajan en los resultados.

Los datos lo respaldan. Webs que mejoraron su LCP en más de 2 segundos vieron mejoras medibles en el posicionamiento. Para palabras clave competidas, esa diferencia de velocidad puede significar estar en la página uno o en la tres.

Las imágenes suelen ser los elementos más pesados de cualquier página. La web media carga más de 1 MB en imágenes. Eso es más que scripts, fuentes y HTML juntos. Optimiza las imágenes y resuelves la mayor parte del problema de rendimiento.

¿Cómo mejoras el Largest Contentful Paint con optimización de imágenes?

El LCP mide cuándo el elemento visible más grande termina de renderizarse. En la mayoría de páginas, es una imagen hero, una foto de producto o un banner.

Si esa imagen tarda 4 segundos en cargar, tu LCP es de 4 segundos. Google lo quiere por debajo de 2,5. Así cierras esa diferencia.

Comprime tus imágenes. Una imagen hero de 2 MB es demasiado grande. Comprímela a 150-200 KB y el tiempo de carga baja drásticamente. Usa un ajuste de calidad entre 75-85% para fotos. La diferencia visual es casi invisible, pero el tamaño del archivo baja un 80-90%.

Usa formatos modernos. Los archivos WebP son 25-35% más pequeños que JPEG con la misma calidad. AVIF ahorra aún más. Todos los navegadores modernos soportan WebP. Cambiar de formato es una de las mejoras más fáciles para el LCP.

Redimensiona al tamaño de visualización. No sirvas una imagen de 4000px cuando la página la muestra a 800px. Primero redimensiona, luego comprime. Solo con esto puedes reducir el tamaño un 70-80%.

Precarga tu imagen LCP. Añade una pista de precarga en tu HTML para que el navegador descargue la imagen hero de inmediato. Sin ella, el navegador descubre la imagen solo después de analizar el CSS. Ese retraso añade cientos de milisegundos.

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Pon fetchpriority="high" en la imagen LCP. Esto le dice al navegador que priorice esta imagen sobre otros recursos. Es un cambio pequeño que recorta tiempo real del LCP.

No hagas lazy load de tu imagen LCP. Este es un error común. El lazy loading retrasa la imagen hasta que entra en el área visible. Tu imagen hero ya está visible al cargar la página. Hacerle lazy loading añade retraso innecesario y hunde tu puntuación de LCP.

¿El lazy loading ayuda o perjudica a los Core Web Vitals?

El lazy loading es genial para imágenes que están debajo del pliegue. Es terrible para imágenes que están arriba.

Cuando añades loading="lazy" a una imagen, el navegador espera hasta que el usuario se acerca haciendo scroll antes de descargarla. Esto ahorra ancho de banda en imágenes que el usuario quizás nunca vea. Reduce el peso inicial de la página y acelera la primera carga.

Pero si haces lazy load de la imagen hero o de cualquier imagen visible en la primera pantalla, le estás diciendo al navegador que espere antes de cargar el elemento visual más importante de la página. Eso aumenta directamente el LCP.

La regla es simple. Haz lazy load de todas las imágenes debajo del pliegue. Nunca hagas lazy load de las imágenes de arriba. Tu imagen hero, logo del header y cualquier contenido visible sin hacer scroll deberían cargar de forma prioritaria.

Para la mayoría de páginas, eso significa que 1-3 imágenes cargan de inmediato. Todo lo demás lleva lazy loading. Este equilibrio te da la mejor puntuación de LCP y a la vez ahorra ancho de banda.

También vigila los cambios de diseño por imágenes con lazy load. Cuando una imagen carga y empuja el contenido hacia abajo, eso es un problema de CLS. Siempre pon atributos width y height explícitos en tus imágenes. El navegador reserva espacio antes de que la imagen cargue, evitando saltos de diseño.

¿Qué formatos de imagen te dan las mejores puntuaciones en Core Web Vitals?

El formato que elijas afecta directamente al tamaño del archivo. Archivos más pequeños cargan más rápido. Cargas más rápidas significan mejor LCP.

WebP es la mejor opción por defecto para imágenes web ahora mismo. Comprime un 25-35% mejor que JPEG sin pérdida visible de calidad. El soporte de navegadores supera el 97%. Salvo que necesites soportar navegadores muy antiguos, WebP debería ser tu formato principal.

AVIF comprime aún mejor que WebP. Hasta un 50% más pequeño que JPEG. Pero la codificación es más lenta y el soporte de navegadores aún está llegando. Usa AVIF si tu pipeline lo soporta y puedes servir alternativas.

JPEG sigue funcionando bien para fotos. Si lo comprimes bien (calidad 75-85), es una opción sólida. Pero WebP casi siempre te dará un archivo más pequeño con la misma calidad visual.

PNG es adecuado para logos, iconos e imágenes con transparencia. Pero los archivos PNG son grandes. Si no necesitas transparencia, convierte a WebP o JPEG.

El elemento <picture> te permite servir el mejor formato a cada navegador:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Imagen hero" width="1200" height="600">
</picture>

Esto sirve AVIF a los navegadores que lo soporten, WebP al siguiente grupo y JPEG como alternativa. Cada visitante recibe el archivo más pequeño posible que su navegador pueda manejar.

¿Cómo evitas que las imágenes causen cambios de diseño?

El cambio de diseño ocurre cuando una imagen carga y mueve el resto del contenido. El texto que estabas leyendo salta hacia abajo. Un botón que ibas a pulsar se mueve. Es frustrante para los usuarios y malo para tu CLS.

La solución es sencilla. Siempre dile al navegador el tamaño de la imagen antes de que cargue.

Pon width y height en cada imagen. El navegador los usa para calcular la proporción y reservar el espacio correcto. Aunque la imagen no haya cargado, el diseño se mantiene estable.

<img src="/foto.webp" alt="Foto de producto" width="800" height="600">

Usa aspect-ratio en CSS para imágenes responsivas. Si tus imágenes escalan con el viewport, fija la proporción en CSS. El navegador reserva el espacio proporcional correcto a cualquier tamaño de pantalla.

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Evita insertar imágenes dinámicamente encima del contenido existente. Si JavaScript carga un banner publicitario o un carrusel en la parte superior, todo lo de abajo se mueve. Reserva espacio para contenido dinámico o cárgalo debajo del pliegue.

Cuidado con los layouts que dependen de fuentes. A veces el cambio de diseño no viene de las imágenes. Las fuentes web que cargan tarde pueden reorganizar el texto y mover imágenes. Usa font-display: swap y precarga tus fuentes clave.

¿Cuál es una buena lista de comprobación para optimizar imágenes para Core Web Vitals?

Aquí tienes una lista paso a paso para cada página:

Antes de subir:

• Redimensiona las imágenes a su tamaño de visualización (2x para pantallas retina).
• Comprime las imágenes a la calidad adecuada. Usa 75-85% para fotos.
• Convierte a WebP o AVIF cuando sea posible.
• Elimina metadatos (datos EXIF, coordenadas GPS, info de la cámara).

En tu HTML:

• Pon width y height en cada etiqueta <img>.
• Añade loading="lazy" a todas las imágenes debajo del pliegue.
• Añade fetchpriority="high" a la imagen LCP.
• Precarga la imagen LCP con <link rel="preload">.
• Usa el elemento <picture> para servir formatos modernos con alternativas.

Después de desplegar:

• Ejecuta Lighthouse o PageSpeed Insights. Revisa tus puntuaciones de LCP y CLS.
• Mira la sección "Oportunidades". Señala imágenes que podrían ser más pequeñas.
• Prueba en móvil. Las conexiones móviles son más lentas, así que la optimización de imágenes importa aún más ahí.

Seguir esta lista de forma constante mantendrá tus Core Web Vitals en verde. La mayoría de webs ven una reducción de LCP de 1-3 segundos solo con la optimización de imágenes.

¿Cómo pruebas y monitorizas el rendimiento de las imágenes?

Optimizar una vez no basta. Se añaden nuevas imágenes. El contenido cambia. Necesitas monitorizar el rendimiento de forma continua.

Google PageSpeed Insights te da una foto rápida. Pega cualquier URL y obtén puntuaciones de LCP, INP y CLS para móvil y escritorio. También muestra datos de campo de usuarios reales de Chrome cuando hay disponibles.

Lighthouse (integrado en Chrome DevTools) ejecuta una auditoría completa. Señala imágenes demasiado grandes, lazy loading faltante, imágenes sin dimensiones e imágenes en formatos obsoletos. Ejecútalo en una ventana de incógnito para evitar interferencias de extensiones.

Google Search Console muestra datos de Core Web Vitals para toda tu web. Agrupa URLs por estado: bueno, necesita mejorar o pobre. Revísalo cada mes para detectar regresiones pronto.

WebPageTest te da una vista de fotogramas de cómo carga tu página. Puedes ver exactamente cuándo aparece cada imagen y cómo afecta a la línea de tiempo del renderizado.

La comparación de herramientas de compresión populares puede ayudarte a elegir la herramienta correcta para tu flujo de trabajo. Ya comprimas una imagen a la vez o proceses cientos por lotes, la herramienta adecuada hace que la optimización sea fácil de mantener.

¿Listo para arreglar tus Core Web Vitals?

Las imágenes son el mayor peso en la mayoría de páginas web. Optimizarlas es el cambio de mayor impacto que puedes hacer para los Core Web Vitals.

Comprime tus imágenes. Usa formatos modernos. Pon dimensiones correctas. Precarga lo que importa. Haz lazy load de lo que no.

CompressIMG se encarga del paso de compresión. Sube tus imágenes, elige tu calidad y descarga archivos optimizados en segundos. Sin necesidad de cuenta. Empieza por tus imágenes hero y ve bajando.

Tu puntuación de LCP te lo agradecerá.