Solucionar el Layout Shift causado por el tamaño automático de la imagen

Solucionar el Layout Shift causado por el tamaño automático de la imagen

Hay 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 docenas de sitios, y causa un layout shift incluso cuando has establecido explícitamente el width y height en tus imágenes. Incluso configurar la propiedad CSS aspect-ratio no lo solucionará.

Última revisión 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, y luego salta a su tamaño completo. Ese es tu layout shift.

Por qué sucede esto

Desde 2019, los navegadores modernos mapean los atributos HTML width y height a una pista de presentación interna aspect-ratio. Esta pista tiene una especificidad CSS nula. Cualquier regla CSS del autor la supera, incluso un simple img { width: auto; }. Cuando el 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.

Es por esto que configurar aspect-ratio en CSS tampoco soluciona el problema. Con width: auto, el navegador resuelve el width a 0 para una imagen no cargada. Un aspect ratio calculado a partir de un width de 0 todavía produce 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 CLS reales, 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. Muchos de esos casos son causados por este exacto patrón CSS: el desarrollador estableció el width y height en HTML, pero una regla CSS global 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 buscando width: auto. Si lo ves, ahora ya sabes qué hacer.

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