Optimiza las imágenes para las 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 el 76% de las páginas móviles, según el Web Almanac de 2025. Esto 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 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

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

Puede que te sorprenda saber que las imágenes pueden afectar a todas las Core Web Vitals. Las imágenes, si se ponen en cola para su descarga tarde durante el renderizado o si simplemente son demasiado grandes, generalmente resultarán en una mala puntuación 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

El Largest Contentful Paint (LCP) mide cuánto tiempo tarda el elemento más grande de la página (como una imagen o un video) en volverse visible para el usuario. Según el Web Almanac de 2025, 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 cargar, puede ralentizar significativamente la puntuación de LCP de la página.

Cumulative Layout Shift

El 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, provocando que otros elementos se muevan. El Web Almanac de 2025 informa que el 65% de las páginas de escritorio aún tienen al menos una imagen sin dimensiones explícitas.

Interaction to Next Paint (INP)

Las imágenes también pueden afectar al 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 decodificarse, la página puede tardar más en responder a las interacciones del usuario, lo que lleva a una puntuación deficiente de INP. Esto es más común en las páginas de listados de productos, donde cientos de imágenes compiten por los recursos.

Paso 1: Optimiza el elemento de imagen HTML para mayor 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 alto 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 encaja la imagen dentro de él. Establece siempre tanto width como height para prevenir cambios de diseño.

Atributo alt

Especifica texto alternativo para la imagen si no se puede mostrar. Esto es importante por motivos de accesibilidad, ya que ayuda a los usuarios con discapacidad visual a comprender 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 utilizan el texto alternativo para entender el contenido de la imagen.

Atributo loading (carga diferida)

Especifica cómo el navegador debe cargar 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 configures loading="lazy" en la imagen LCP. Según el Web Almanac de 2025, el 16% de las páginas todavía cargan de forma diferida 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 obtención de un recurso en relación con otros recursos de 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 victoria fácil.

Paso 2: Asegúrate de que la imagen se ponga en cola para su descarga lo antes posible

Lo segundo que debes hacer, después de haber optimizado el HTML, es observar la programación de las 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 podrá 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 su descarga lo antes posible?

Precarga el elemento LCP

La forma más eficaz de garantizar una descarga temprana es precargar la imagen. La precarga de la imagen se realiza con una simple etiqueta al comienzo 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 calificación 'buena' en LCP, en comparación con el 65% sin precarga.

Carga anticipada (eager) del elemento LCP

Usa una alta fetchpriority

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 le indicará al navegador que una imagen es importante para la página y el navegador la descargará con alta prioridad. Ten en cuenta que usar fetchpriority="high" generalmente no es tan eficiente como precargar una imagen.

Paso 3: Asegúrate de que la imagen se descargue lo más rápido posible

Lo tercero que debes hacer es asegurarte de no estar desperdiciando valiosos recursos de red en imágenes que son más grandes de lo que deberían ser. Puedes hacer esto utilizando imágenes responsivas, usando compresión y usando nuevos y más rápidos formatos de imagen.

Imágenes responsivas

Aquí hay una imagen responsiva utilizando 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="Descriptive alt text">

El navegador elige la imagen más adecuada en función del ancho del viewport. Para imágenes diferidas (below-the-fold) con carga perezosa, también puedes utilizar sizes="auto" (compatible en Chrome 126+ y Edge 126+), lo que permite al navegador calcular el tamaño correcto automáticamente basándose en el diseño CSS de la imagen.

Compresión de imágenes

Nuevos y más rápidos formatos de imagen

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 manteniendo la misma calidad visual.

WebP es compatible con prácticamente todos los navegadores (~99% de soporte global) y normalmente reduce el tamaño del archivo entre un 25 y un 35% en comparación con JPEG. AVIF va aún más allá con ahorros de más del 50% respecto a JPEG y ahora tiene un 94,7% de compatibilidad en navegadores (Chrome 85+, Firefox 93+, Safari 16.4+). A pesar de esto, el Web Almanac de 2025 muestra que AVIF se usa en solo el 0,7% de las imágenes LCP, mientras que JPEG sigue dominando con el 57%. Esa es una oportunidad enorme.

Utiliza 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="Descriptive alt text">
</picture>

El navegador intentará con 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 compatibilidad en navegadores.

Paso 4: ¡Elimina los cambios de diseño!

Las imágenes que cambian de tamaño mientras se están cargando causarán un Cumulative Layout Shift. Es así de simple. Esta sección cubre las 3 razones más comunes. Para obtener la guía completa sobre todas las causas de CLS por imágenes y medios (incluyendo videos, iframes, dirección de arte, desajustes de imágenes responsivas y carga diferida), consulta Cómo las imágenes y medios causan cambios de diseño.

1. Falta de dimensiones de la imagen

2. Problemas de estilo

Por lo general, se evita que las imágenes crezcan más que el viewport mediante un sencillo truco de CSS:

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

Este es un gran truco y deberías usarlo. Lamentablemente, veo con regularidad variantes de este truco que sí causan cambios de diseño. Por ejemplo, al agregar width:auto:

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

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

3. Placeholders (Marcadores de posición)

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

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

Paso 5: Protege el hilo principal (main thread)

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

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

Paso 6: ¡Elige 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 realmente priorizar 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 tener carga diferida configurando loading="eager" o al omitir el atributo loading
3. Indícale al navegador que esta imagen debe descargarse con alta prioridad utilizando 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í tienes un ejemplo completo de una imagen LCP optimizada, responsiva y con precarga:

<!-- In <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">

<!-- In <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="Descriptive alt text"
  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 les dará a estas imágenes visibles su orden de descarga natural y correcto.

1. Dile al navegador que esta imagen no debe tener carga diferida configurando loading="eager" o al omitir 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 (fuera de la pantalla inicial)

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

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

Evita las imágenes de fondo (background images)

Si estás utilizando imágenes de fondo, debes reconsiderarlo. Las imágenes de fondo no pueden cargarse de forma diferida, no puedes controlar la propiedad decoding y no puedes configurar el fetchpriority. Las imágenes de fondo por lo general no son responsivas, lo que probablemente te costará mucho ancho de banda. Pero lo más importante es que las imágenes de fondo generalmente se descubren después de que el navegador haya descargado los archivos CSS. ¡Este casi nunca es el momento adecuado para iniciar la descarga de una imagen! Lee por qué las imágenes de fondo son malas 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!

Monitorea el impacto con Real User Monitoring

Después de aplicar estas optimizaciones, verifica que realmente mejoran el rendimiento para los usuarios reales. Herramientas de laboratorio como Lighthouse pueden confirmar que tus cambios son correctos, pero solo el Real User Monitoring te muestra el impacto real en tus visitantes. Realiza un seguimiento de tu LCP, CLS e INP a lo largo del tiempo para confirmar que tus optimizaciones de imágenes están funcionando como se espera.