Optimizar imágenes para Core Web Vitals

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

Las imágenes son responsables del Largest Contentful Paint en el 85% de las páginas de escritorio y en el 76% de las páginas móviles, según el 2025 Web Almanac. Eso hace que la optimización de imágenes sea lo más impactante que puedes hacer por tus Core Web Vitals. Pero las imágenes no solo afectan la velocidad de carga. Pueden causar cambios de diseño (layout shifts) y, en páginas con muchas imágenes, incluso ralentizar la interactividad. Esta guía cubre todos los ángulos: desde atributos HTML y precarga hasta imágenes responsivas, formatos modernos y las estrategias que debes aplicar a cada imagen en tu página.

Revisado por última vez por Arjen Karel en febrero de 2026

¿A qué Core Web Vitals pueden afectar las imágenes?

Te sorprenderá saber que las imágenes pueden afectar a todas las Core Web Vitals. Las imágenes, si se ponen en cola para descargar tarde durante el renderizado o si son simplemente demasiado grandes, generalmente resultarán en una puntuación alta de LCP. Si las dimensiones de la imagen no están establecidas o cambian durante la fase de carga, las imágenes también pueden afectar la puntuación de CLS. Y finalmente, si la decodificación de la imagen ocupa demasiado trabajo del hilo principal, incluso pueden afectar el INP. Echemos un vistazo más de cerca:

Largest Contentful Paint

Largest Contentful Paint (LCP) mide cuánto tiempo tarda el elemento más grande de la página (como una imagen o video) en volverse visible para el usuario. Según el 2025 Web Almanac, las imágenes son el elemento LCP en el 85% de las páginas de escritorio y el 76% de las páginas móviles. Si una imagen se pone en cola demasiado tarde o tarda demasiado en cargarse, puede ralentizar significativamente la puntuación LCP de la página.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) mide cuánto se desplaza el contenido de una página mientras se carga. Las imágenes pueden causar cambios de diseño si no tienen el tamaño adecuado o si se insertan en la página después de que ya se ha cargado, causando que otros elementos se muevan. El 2025 Web Almanac informa que el 65% de las páginas de escritorio todavía tienen al menos una imagen sin dimensiones explícitas.

Interaction to Next Paint (INP)

Las imágenes también pueden afectar el Interaction to Next Paint (INP), que mide el tiempo que tarda una página en responder visualmente después de que un usuario interactúa con ella. Si hay demasiadas imágenes grandes que necesitan ser decodificadas, la página puede tardar más en responder a las interacciones del usuario, lo que lleva a una mala puntuación de INP. Esto es más común en páginas de listado de productos donde cientos de imágenes compiten por los recursos.

Paso 1: Optimizar el elemento de imagen HTML para velocidad

Atributo Src

Especifica la URL de la imagen. Esta propiedad es esencial, ya que le dice al navegador dónde encontrar la imagen.

Atributos Width y Height

Especifican el ancho y la altura de la imagen en píxeles. Estas propiedades son importantes para renderizar la imagen correctamente en la página, ya que definen el tamaño del contenedor de la imagen y cómo la imagen encaja dentro de él. Siempre establece tanto el ancho como la altura para prevenir cambios de diseño.

Atributo Alt

Especifica el texto alternativo para la imagen si no se puede mostrar. Esto es importante para fines de accesibilidad, ya que ayuda a los usuarios con discapacidad visual a entender de qué trata la imagen. También es importante para la optimización de motores de búsqueda (SEO), ya que los motores de búsqueda usan el texto alternativo para entender el contenido de la imagen.

Atributo Loading (carga diferida)

Especifica cómo debe cargar el navegador la imagen (lazy, eager o auto). Esta propiedad es importante para mejorar el rendimiento de la página, ya que permite que las imágenes se carguen de forma asíncrona y solo cuando son necesarias. Nunca establezcas loading="lazy" en la imagen LCP. Según el 2025 Web Almanac, el 16% de las páginas todavía cargan de forma diferida (lazy-load) su imagen LCP, lo cual es uno de los errores de rendimiento más comunes en la web.

Atributo Srcset

Atributo Sizes

Atributo Decoding

Atributo Fetchpriority

El atributo fetchpriority especifica la prioridad de la búsqueda de un recurso en relación con otros recursos en la página. El atributo puede tener uno de tres valores: "high", "low" o "auto". Un recurso con alta prioridad se carga antes que los recursos con prioridades más bajas. A partir de 2026, fetchpriority es compatible con todos los navegadores modernos (Chrome 102+, Safari 17.2+, Firefox 132+, Edge 102+) y es seguro usarlo en producción. Solo el 17% de las páginas lo usan en su imagen LCP, lo que significa que la gran mayoría de los sitios se están perdiendo una mejora fácil.

Paso 2: Asegurar que la imagen se ponga en cola para descargar lo antes posible

Lo segundo que hay que hacer, después de haber optimizado el HTML, es mirar la programación de imágenes. En muchos casos, el mayor cuello de botella cuando se trata de imágenes que afectan la métrica LCP es la programación tardía. Si un navegador tiene la oportunidad de descargar el elemento LCP temprano durante el proceso de renderizado, la imagen estará disponible para el navegador lo antes posible y el navegador puede comenzar a pintar ese elemento temprano en el proceso de renderizado.

Suena simple, ¿verdad? Bueno, ¿cómo nos aseguramos de que la imagen se ponga en cola para descargar lo antes posible?

Precargar el elemento LCP

La forma más efectiva de asegurar una descarga temprana es precargar la imagen. La precarga de la imagen se hace con una etiqueta simple al inicio del elemento <head>. Por ejemplo:

<link rel="preload" as="image" href="image.jpg">

Esta simple etiqueta le dirá al navegador que necesitaremos "image.jpg" muy pronto y el navegador comenzará a descargar este archivo inmediatamente.

En los sitios monitoreados por CoreDash, el 83% de las cargas de página con una imagen LCP precargada obtienen una puntuación 'buena' en LCP, en comparación con el 65% sin precarga.

Carga inmediata (Eager load) del elemento LCP

Usar fetchpriority alta

Si, por alguna razón, no puedes precargar el elemento LCP, al menos asegúrate de que el elemento tenga el atributo fetchpriority establecido en high. Esto indicará al navegador que una imagen es importante para la página y el navegador la descargará con una prioridad alta. Ten en cuenta que usar fetchpriority="high" generalmente no es tan eficiente como precargar una imagen.

Paso 3: Asegurar que la imagen se descargue lo más rápido posible

Lo tercero que hay que hacer es asegurarse de no desperdiciar preciosos recursos de red en imágenes que son más grandes de lo que deberían ser. Puedes hacer esto usando imágenes responsivas, usando compresión y usando formatos de imagen nuevos y más rápidos.

Imágenes responsivas

Aquí hay una imagen responsiva usando srcset y sizes:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Texto alternativo descriptivo">

El navegador elige la imagen más apropiada basada en el ancho del viewport. Para imágenes below-the-fold con carga diferida, también puedes usar sizes="auto" (soportado en Chrome 126+ y Edge 126+), que permite al navegador calcular el tamaño correcto automáticamente basado en el diseño CSS de la imagen.

Compresión de imagen

Formatos de imagen nuevos y más rápidos

Las imágenes suelen ser uno de los recursos más grandes en una página web, y pueden ralentizar significativamente la velocidad de carga de una página si no están optimizadas. Los formatos de imagen modernos como WebP y AVIF ofrecen una compresión significativamente mejor que JPEG mientras mantienen la misma calidad visual.

WebP es compatible con prácticamente todos los navegadores (~99% de soporte global) y típicamente reduce el tamaño del archivo en un 25-35% en comparación con JPEG. AVIF va aún más allá con más del 50% de ahorro sobre JPEG y ahora tiene un 94.7% de soporte de navegadores (Chrome 85+, Firefox 93+, Safari 16.4+). A pesar de esto, el 2025 Web Almanac muestra que AVIF se usa solo para el 0.7% de las imágenes LCP, mientras que JPEG todavía domina con el 57%. Esa es una oportunidad masiva.

Usa el elemento <picture> para servir el mejor formato que admita cada navegador:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="800" height="450" alt="Texto alternativo descriptivo">
</picture>

El navegador intentará AVIF primero, recurrirá a WebP y usará JPEG como último recurso. Si tienes curiosidad sobre el futuro, lee sobre JPEG XL y su estado actual de soporte en navegadores.

Paso 4: ¡Eliminar el cambio de diseño (layout shift)!

Las imágenes que cambian de tamaño mientras se cargan causarán un layout shift (cambio de diseño). Es tan simple como eso. Hay 3 razones principales por las que las imágenes causan un cambio de diseño (hay más, pero estas 3 son las más comunes):

1. Dimensiones de imagen faltantes

2. Problemas de estilo

Generalmente se evita que las imágenes crezcan más que el viewport mediante un simple truco de CSS:

img{
   max-width:100%;
   height:auto;
}

Este es un gran truco y deberías usarlo. Desafortunadamente, veo regularmente variantes de este truco que sí causan un cambio de diseño. Por ejemplo, agregando width:auto:

img{
   max-width:100%;
   height:auto;
   width:auto;
}

Esto hará que cualquier imagen se renderice con un ancho y alto automáticos. Esto generalmente significa que el navegador renderizará la imagen a 0x0px antes de que la imagen se haya descargado.

3. Marcadores de posición (Placeholders)

Algunos scripts de carga diferida basados en JavaScript usan marcadores de posición. Si usas algún tipo de truco CSS como el mencionado max-width:100% y height:auto, entonces la altura automática del marcador de posición cuadrado no coincidirá con el atributo height de la imagen. Básicamente, la imagen se renderizará primero con el marcador de posición cuadrado a 720x720 y cuando la imagen final se haya descargado, se renderizará a 720x180:

<img
  src="1x1placeholder.png"
  data-src="hero.png"
  width="720"
  height="180"
  style="height:auto;max-width:100%"
>

Paso 5: Proteger el hilo principal

Lo siguiente es asegurarse de que no se decodifiquen demasiadas imágenes en el hilo principal al mismo tiempo. Generalmente esto no será un problema, pero lo he visto suceder muchas veces en páginas de listado de productos (¡donde a veces hasta 500 imágenes compiten por los recursos!).

El truco es agregar decoding="async" a todas las imágenes para asegurar que estas imágenes se puedan decodificar en un hilo separado. También intenta evitar que tantas imágenes se decodifiquen todas a la vez agregando loading="lazy" a todas las imágenes below-the-fold y ocultas.

Paso 6: ¡Elegir la estrategia correcta para cada imagen!

Estrategias de imagen para el elemento LCP

El elemento LCP suele ser el elemento visual más importante. Así que necesitamos priorizar realmente este.

1. Precarga la imagen temprano en el head de la página con este código: <link rel="preload" as="image" href="path-to-img.png">
2. Dile al navegador que esta imagen no debe cargarse de forma diferida estableciendo loading="eager" o omitiendo el atributo loading
3. Indica al navegador que esta imagen debe descargarse con una prioridad alta usando fetchpriority="high" (si estás precargando la imagen, puedes omitir esta parte)
4. Establece decoding="sync" ya que este elemento es tan importante que queremos decodificarlo en el hilo principal

Aquí hay un ejemplo completo de una imagen LCP optimizada y responsiva con precarga:

<!-- En <head> -->
<link rel="preload" as="image" href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 800px">

<!-- En <body> -->
<img src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Texto alternativo descriptivo"
  fetchpriority="high" decoding="sync">

Estrategia de imagen para logotipos y otras imágenes visibles (no LCP)

Las imágenes visibles deben cargarse bastante pronto durante la carga de la página, pero preferiblemente después del elemento LCP. Podemos lograr esto precargando el elemento LCP. Eso le dará a estas imágenes visibles su orden de descarga natural y correcto.

1. Dile al navegador que esta imagen no debe cargarse de forma diferida estableciendo loading="eager" o omitiendo el atributo loading
2. Establece decoding="async" ya que este elemento se puede decodificar de forma segura fuera del hilo principal.

Estrategia de imagen para imágenes below-the-fold

Todas las imágenes below-the-fold (debajo del pliegue) deben cargarse de forma diferida. ¡Es así de simple! ¡No hay excepciones!

1. Dile al navegador que esta imagen debe cargarse de forma diferida estableciendo loading="lazy"
2. Establece decoding="async" ya que este elemento se puede decodificar de forma segura fuera del hilo principal.

Evitar imágenes de fondo

Si estás usando imágenes de fondo, necesitas reconsiderarlo. Las imágenes de fondo no pueden cargarse de forma diferida y no puedes controlar la propiedad decoding y no puedes establecer el fetchpriority. Las imágenes de fondo generalmente no son responsivas, lo que probablemente te costará mucho ancho de banda. Pero lo más importante, las imágenes de fondo generalmente se descubren después de que el navegador ha descargado los archivos CSS. ¡Este casi nunca es el momento adecuado para activar la descarga de una imagen! Lee por qué las imágenes de fondo son malvadas y cómo diferir imágenes de fondo cuando no tienes opción.

¡Puedes usar etiquetas de imagen normales en combinación con el CSS object-fit:cover para hacer que las imágenes normales se comporten como imágenes de fondo!

Monitorear el impacto con Real User Monitoring

Después de aplicar estas optimizaciones, verifica que realmente mejoren el rendimiento para los usuarios reales. Las herramientas de laboratorio como Lighthouse pueden confirmar que tus cambios son correctos, pero solo el Monitoreo de Usuarios Reales (Real User Monitoring) te muestra el impacto real en tus visitantes. Rastrea tu LCP, CLS e INP a lo largo del tiempo para confirmar que tus optimizaciones de imagen están funcionando como se espera.