Solucionar el Layout Shift causado por imágenes con tamaño automático

Solucionar el Layout Shift causado por imágenes con tamaño automático

Existe un patrón común de CSS que destruirá tu puntuación de Cumulative Layout Shift con una sola línea de código. Lo he visto en decenas de sitios, y causa un Layout Shift incluso cuando has establecido explícitamente el width y height en tus imágenes. Ni siquiera establecer la propiedad CSS aspect-ratio lo solucionará.

Este artículo se centra en el problema de CSS width: auto. Para la guía completa sobre todas las causas de Layout Shift por imágenes y medios (videos, iframes, dirección de arte, imágenes responsivas, lazy loading, placeholders), consulta Cómo las imágenes y los medios causan Layout Shift.

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

El problema

Aquí está el CSS que causa el problema. Se usa comúnmente para imágenes responsivas:

<style>
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
</style>

La declaración width: auto es el problema. Anula el width que el navegador calcula a partir de tus atributos HTML width y height, lo que significa que el navegador ya no puede reservar espacio para la imagen antes de que se cargue. La imagen se renderiza a 0x0 píxeles hasta que el archivo se descarga y decodifica, luego salta a su tamaño completo. Ese es tu Layout Shift.

Por qué ocurre esto

Desde 2019, los navegadores modernos mapean los atributos HTML width y height a una pista de presentación interna de aspect-ratio. Esta pista tiene cero especificidad en CSS. Cualquier regla CSS del autor la supera, incluso un simple img { width: auto; }. Cuando CSS establece width: auto, el navegador pierde la información que necesita para calcular el height reservado a partir del aspect ratio. Ambas dimensiones se vuelven desconocidas hasta que la imagen se carga.

Por eso, establecer aspect-ratio en CSS tampoco soluciona el problema. Con width: auto, el navegador resuelve el width a 0 para una imagen no descargada. Un aspect ratio calculado a partir de un width de 0 sigue produciendo un height de 0. La reserva de espacio solo funciona cuando el navegador tiene al menos una dimensión conocida con la que trabajar.

También es engañoso porque solo causa un Layout Shift para los visitantes primerizos. Si ya tienes la imagen en la caché de tu navegador, las dimensiones intrínsecas están disponibles de inmediato y no ocurre ningún shift. Tú, como desarrollador, probablemente nunca lo verás.

Cómo lo descubrimos

Estos problemas son casi imposibles de detectar en pruebas de laboratorio porque Lighthouse se ejecuta en una máquina rápida con una caché activa. La forma de detectarlos es con Real User Monitoring. RUM rastrea los Core Web Vitals para visitantes reales en dispositivos reales y te informa las puntuaciones reales de CLS, incluyendo los shifts que solo ocurren en las primeras visitas a través de conexiones lentas.

El Web Almanac de 2025 informa que el 62% de las páginas móviles todavía tienen al menos una imagen sin tamaño. Muchas de ellas son causadas por este exacto patrón de CSS: el desarrollador estableció width y height en HTML, pero una regla global de CSS los anula con auto.

La solución

Elimina width: auto. Mantén height: auto y max-width: 100%. Este es el patrón recomendado por web.dev para imágenes responsivas que no causan Layout Shifts:

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

Con este CSS, el navegador usa el atributo HTML width para determinar el width de la imagen (limitado al 100% del contenedor por max-width), y height: auto calcula el height correcto a partir del aspect ratio. El espacio se reserva antes de que la imagen se cargue. Sin Layout Shift.

Asegúrate de que tus etiquetas <img> incluyan tanto los atributos width como height:

<img src="hero.jpg" width="800" height="450" alt="Description">

Hazte un favor: haz clic derecho en cualquier imagen de tu sitio, elige "Inspeccionar elemento" y revisa los estilos computados para width: auto. Si lo ves, ahora sabes qué hacer.

Consejo: Para más técnicas de optimización de imágenes, consulta cómo optimizar imágenes para Core Web Vitals y cómo solucionar imágenes hero lentas.