Las imágenes son la razón principal por la que los sitios fallan en las Core Web Vitals. Suelen ser el elemento más grande de la página, bloquean el renderizado y causan cambios de diseño cuando aparecen de golpe sin un espacio reservado.
La buena noticia para los desarrolladores: los problemas de imágenes son los más fáciles de solucionar en las Core Web Vitals. A diferencia del profundo trabajo de JavaScript que exige la métrica INP, la optimización de imágenes sigue patrones claros y repetibles. Hágalo bien y moverá dos de las tres métricas en la dirección correcta de una sola vez.
Esta es una lista de verificación práctica, no una lección teórica. Cada punto es algo que puede aplicar hoy: las opciones de formato, los atributos de carga, las reglas de dimensiones y la configuración de entrega que transforman las puntuaciones de Core Web Vitals impulsadas por imágenes de rojo a verde.
Al final, tendrá un proceso de optimización de imágenes repetible que podrá aplicar a cualquier página en cualquier pila tecnológica.
Cómo afectan las imágenes a cada Core Web Vital
Las Core Web Vitals son tres métricas que Google utiliza como señal de ranking de experiencia de página, medidas en usuarios reales en el percentil 75. Según la documentación oficial de Core Web Vitals de Google en web.dev, las tres métricas y sus umbrales "buenos" son los siguientes.
LCP (Largest Contentful Paint): menos de 2.5 segundos
Mide cuánto tarda en renderizarse el elemento visible más grande. En la mayoría de las páginas, ese elemento es una imagen, generalmente la imagen principal o "hero". Una imagen hero pesada y de carga lenta es la causa más común de una mala puntuación LCP. Las imágenes son el centro de esta métrica.
CLS (Cumulative Layout Shift): menos de 0.1
Mide el movimiento inesperado del diseño mientras la página se carga. Las imágenes sin anchura y altura explícitas son una causa principal. Cuando una imagen se carga y empuja el contenido hacia abajo porque el navegador no reservó espacio para ella, se produce un cambio de diseño que daña su puntuación CLS.
INP (Interaction to Next Paint): menos de 200 milisegundos
Mide la capacidad de respuesta a las interacciones del usuario. INP reemplazó a First Input Delay en marzo de 2024. Las imágenes afectan a la métrica INP de manera menos directa, pero la decodificación de imágenes pesadas y los archivos de gran tamaño compiten por el hilo principal del navegador y pueden retrasar la disponibilidad para interactuar. Las imágenes más ligeras también ayudan aquí.
Por lo tanto, las imágenes impulsan directamente el LCP y el CLS, mientras que afectan indirectamente al INP. Optimice sus imágenes y mejorará las dos métricas en las que la mayoría de los sitios fallan cuando tienen muchas imágenes.
Los umbrales de las Core Web Vitals 2026
Tenga estos números presentes. Google mide el percentil 75 de los usuarios reales, por lo que el 75% de las visitas deben alcanzar el nivel "bueno" para aprobar.
Lista de verificación parte 1: solucionar LCP (tu imagen hero)
En el LCP es donde las imágenes importan más. El elemento más grande casi siempre es una imagen, por lo que estas correcciones lo abordan directamente.
1. Sirve la imagen LCP en AVIF o WebP
Los formatos modernos reducen drásticamente el tamaño del archivo de la imagen LCP. AVIF es hasta un 50% más pequeño que JPEG, y WebP entre un 25 y un 35% más pequeño. Un archivo más pequeño significa una carga más rápida, lo que se traduce en un mejor LCP. Esta comparación de JPEG vs PNG vs WebP vs AVIF cubre cuál elegir y cómo configurar alternativas para una cobertura total del navegador.
2. Añade fetchpriority="high" a la imagen LCP
Dile al navegador que esta imagen es importante. Añadir fetchpriority="high" a tu imagen hero hace que el navegador la solicite antes, por delante de los recursos de menor prioridad. Este único atributo puede reducir cientos de milisegundos en el LCP.
3. Nunca apliques lazy-load a la imagen LCP
La carga diferida (lazy loading) es ideal para imágenes que están debajo de la línea de flotación (below-the-fold), pero aplicar loading="lazy" a tu imagen hero es un error clásico. Retrasa la imagen más importante de la página. La imagen LCP debe cargarse de inmediato, con alta prioridad.
4. Pre-carga (preload) la imagen hero
Añade una etiqueta <link rel="preload" as="image"> en el head para tu imagen hero para que el navegador la descubra pronto, antes de terminar de analizar el resto del HTML. Combínalo con fetchpriority high para obtener el máximo efecto.
5. Redimensiona la imagen a su tamaño de visualización
Servir una imagen de 3000 píxeles de ancho en un contenedor de 800 píxeles desperdicia tiempo de carga en píxeles que nadie ve. Redimensiona la imagen hero al tamaño más grande al que realmente se muestra y luego sirve variantes responsivas para pantallas más pequeñas. Esta suele ser la mayor victoria para el LCP.
6. Mantén el TTFB por debajo de 200ms
El Time to First Byte (tiempo hasta el primer byte) es la base del LCP. Si el servidor tarda un segundo en responder, ninguna optimización de imagen te salvará. Utiliza una CDN, almacena en caché de forma agresiva y considera la entrega en el edge. El objetivo es un TTFB inferior a 200ms, ya que la imagen LCP solo puede ser tan rápida como el servidor lo permita.
¿Necesitas comprimir tu imagen hero y las imágenes de contenido al tamaño y formato adecuados? Usa el compresor de imágenes gratuito → para una compresión rápida en AVIF y WebP, o prueba el compresor personalizado → para controlar las dimensiones exactas, el formato y la calidad para cada breakpoint. Ambos funcionan en tu navegador sin subir nada a ningún servidor.
Lista de verificación parte 2: solucionar CLS (reservar espacio para imágenes)
El CLS causado por imágenes es casi siempre un problema: el navegador no sabe qué tamaño tendrá la imagen, por lo que no reserva espacio y luego desplaza el contenido cuando la imagen llega. Todas las soluciones se resumen en reservar ese espacio de antemano.
7. Establece siempre los atributos width y height
Cada elemento de imagen necesita atributos explícitos de width y height. El navegador los utiliza para calcular la relación de aspecto y reservar el espacio correcto antes de que se cargue la imagen, eliminando el salto. Esta es la corrección de CLS más importante y la que más comúnmente se omite.
8. Usa la propiedad CSS aspect-ratio para imágenes responsivas
Para las imágenes responsivas que escalan con su contenedor, establece la propiedad CSS aspect-ratio para que el navegador reserve un espacio proporcional en cualquier anchura de pantalla. Combinado con los atributos width y height, esto mantiene el diseño estable en todos los breakpoints.
9. Reserva espacio para las imágenes de carga tardía
Para las imágenes cargadas mediante JavaScript, en carruseles o debajo de la línea de flotación, asegúrate de que sus contenedores tengan dimensiones reservadas desde el principio. Una imagen que aparece después de una interacción debe colocarse en un espacio previamente dimensionado, no empujar la página cuando llega.
10. Evita insertar imágenes encima del contenido existente
Si inyectas una imagen (un anuncio, un banner o un hero de carga tardía) por encima del contenido que el usuario ya está leyendo, todo saltará hacia abajo. Reserva el espacio con antelación o insértala debajo de la línea de flotación donde no interrumpa lo que ve el usuario.
Lista de verificación parte 3: optimizar la entrega (cada imagen)
Estas reglas se aplican a todas las imágenes de la página, no solo a la principal, por lo que su efecto se acumula en páginas con muchas imágenes.
11. Aplica lazy-load a las imágenes debajo de la línea de flotación
Añade loading="lazy" a cada imagen que esté debajo del pliegue. El navegador solo las cargará a medida que el usuario se desplace cerca de ellas, lo que libera ancho de banda y tiempo del hilo principal para el contenido crítico en pantalla. Simplemente nunca lo apliques a la imagen LCP.
12. Sirve imágenes responsivas con srcset
Utiliza los atributos srcset y sizes para servir imágenes del tamaño adecuado a cada dispositivo. Un teléfono recibe una imagen pequeña y una computadora de escritorio una grande. Esto puede reducir a la mitad el peso de las imágenes móviles, y dado que Google clasifica utilizando datos de campo móviles, el peso móvil es lo que cuenta.
13. Comprime cada imagen, no solo la principal
Una página puede tener una imagen hero y veinte imágenes de contenido. Esas veinte suman. Comprímelas todas al 80-85% de calidad. La guía completa para comprimir imágenes para la velocidad del sitio web cubre todo el flujo de trabajo, incluida la automatización que hace que esto sea práctico a gran escala.
14. Utiliza una CDN o servicio de imágenes
Las CDN de imágenes (Cloudinary, ImageKit, Cloudflare Images) sirven imágenes desde ubicaciones cercanas al usuario, las convierten a AVIF o WebP al instante y las redimensionan automáticamente por dispositivo. Para un sitio con mucho contenido, este único cambio puede solucionar la mayoría de los problemas de Core Web Vitals relacionados con imágenes a la vez.
15. Maneja los archivos PNG con cuidado
Los archivos PNG suelen ser las imágenes más pesadas de una página. Si tienes capturas de pantalla o gráficos en PNG, aquí te mostramos cómo comprimir imágenes PNG hasta en un 70%, o conviértelos a WebP, que mantiene la transparencia a una fracción del tamaño.
Cómo medir tus Core Web Vitals impulsadas por imágenes
No puedes optimizar lo que no mides. Utiliza estas herramientas en orden:
- PageSpeed Insights: pega tu URL para obtener datos tanto de laboratorio como de usuarios reales (campo), con el elemento LCP identificado
- Panel de Rendimiento (Performance) de Chrome DevTools: graba una carga para ver exactamente qué imagen es el elemento LCP y cuánto tarda
- Lighthouse: ejecútalo en cada despliegue importante para detectar regresiones antes de pasarlas a producción
- Informe de Core Web Vitals de Google Search Console: supervisa las tasas de aprobación de usuarios reales en todo tu sitio durante un periodo de 28 días
- Extensión de Chrome Web Vitals: observa el LCP, CLS e INP en tiempo real mientras navegas durante el desarrollo
Comienza con PageSpeed Insights para encontrar tu elemento LCP. Si es una imagen (generalmente lo es), la lista de verificación de LCP anterior es tu prioridad.
Una nota sobre imágenes fuera de la página web
Las Core Web Vitals solo cubren tus propias páginas, pero la misma disciplina de compresión ayuda en todos los lugares por donde viajan las imágenes. Si también publicas en redes sociales, la hoja de trucos de tamaño de imagen para redes sociales muestra las dimensiones correctas por plataforma, para que sirvas imágenes del tamaño adecuado también allí en lugar de dejar que cada plataforma recomprima subidas de gran tamaño.
El orden de prioridad: qué solucionar primero
Si solo tienes tiempo para unas pocas correcciones, hazlas en este orden para obtener el mayor impacto en Core Web Vitals:
- Primero: añade width y height a cada imagen (soluciona la mayor parte del CLS al instante)
- Segundo: convierte y comprime la imagen hero LCP a AVIF o WebP al tamaño de visualización
- Tercero: añade fetchpriority high y preload al hero, elimina cualquier lazy-load de él
- Cuarto: aplica lazy-load a todas las imágenes debajo de la línea de flotación
- Quinto: añade srcset para un dimensionamiento responsivo
- Sexto: traslada la entrega de imágenes a una CDN o servicio de imágenes
Las tres primeras por sí solas solucionan la mayoría de los fallos de Core Web Vitals causados por imágenes en la mayor parte de las páginas. Toman una tarde, no un sprint.
5 errores de imágenes que arruinan silenciosamente tus Core Web Vitals
1. Aplicar lazy-load a la imagen hero
El autogol más común. Cargar de forma diferida la imagen LCP retrasa exactamente lo que mide la métrica. Carga el hero de forma inmediata (eager) y diferida todo lo que esté por debajo del pliegue.
2. Olvidar los atributos width y height
Sin dimensiones no hay espacio reservado, lo que significa cambios de diseño. Esta simple omisión está detrás de la mayoría de los fallos de CLS. Añádelos a cada imagen, siempre.
3. Servir imágenes de tamaño excesivo
Una imagen de 4000px en un espacio de 800px carga cuatro veces más lento de lo necesario. Redimensiónala al tamaño de visualización y sirve variantes responsivas. El usuario nunca ve los píxeles desperdiciados, pero siente la espera.
4. Seguir usando JPEG y PNG en todas partes
Aferrarse a formatos antiguos deja sin aprovechar entre un 25 y un 50% de ahorro en tamaño de archivo. Convierte a AVIF o WebP con alternativas y tu LCP mejorará en todo el sitio.
5. Optimizar solo el hero
El hero es lo más importante para el LCP, pero veinte imágenes pesadas de contenido siguen ralentizando la página y compiten por el ancho de banda. Comprime cada imagen de la página, no solo la que está en la parte superior.
Resumen
Las imágenes son la razón más común por la que las páginas fallan en las Core Web Vitals, y al mismo tiempo son las más fáciles de solucionar. Impulsan directamente el LCP, causan la mayoría de los problemas de CLS y añaden un peso que afecta al INP. Soluciónalas y dos de las tres métricas mejorarán a la vez.
Sigue la lista de verificación en orden: dimensiones en cada imagen para el CLS, luego un hero en formato moderno comprimido y con alta prioridad para el LCP, y después carga diferida y dimensionamiento responsivo para el resto. Mide con PageSpeed Insights y Search Console, y trata las regresiones como errores (bugs).
La mayoría de los fallos de Core Web Vitals impulsados por imágenes se reducen a un puñado de patrones. Apréndelos una vez y podrás poner una página en verde en una tarde.