Warning Imagen sin atributos width y height
Por qué <img> necesita atributos width y height para evitar cambios de layout, y cómo interactúan con el CSS responsivo.
El validador marca cualquier <img> que no tenga ni width ni height.
Ejemplo
<!-- Incorrecto: sin indicio de tamaño hasta que la imagen carga -->
<img src="/hero.jpg" alt="Foto principal del producto">
<!-- Correcto -->
<img src="/hero.jpg" alt="Foto principal del producto" width="1200" height="600">Usa las dimensiones intrínsecas reales de la imagen en píxeles (o su relación de aspecto correcta) — CSS como width: 100%; height: auto; igual puede redimensionarla de forma responsiva. Los atributos existen puramente para que el navegador pueda reservar la cantidad correcta de espacio antes de que el archivo se haya descargado.
Por qué importa
Sin dimensiones, el navegador no conoce la relación de aspecto de una imagen hasta que se ha descargado lo suficiente del archivo para leerla, así que inicialmente renderiza la imagen con altura cero. Todo lo que está debajo salta hacia abajo en cuanto se conoce el tamaño real — esto es el Cumulative Layout Shift (CLS), una de las tres métricas Core Web Vitals de Google, y afecta directamente tanto la experiencia de usuario (clics equivocados por contenido que salta bajo el cursor) como el ranking de búsqueda. Los navegadores modernos usan la proporción width/height para calcular la relación de aspecto correcta automáticamente, incluso cuando CSS anula el tamaño renderizado.
Frequently asked questions
¿Los atributos width/height entran en conflicto con el CSS responsivo?
No. Los navegadores los usan solo para calcular la relación de aspecto de la imagen antes de que cargue; cualquier width/height definido en CSS sigue ganando para el tamaño renderizado real. Esto es una práctica estándar en sitios responsivos, no una técnica heredada de layout fijo.
¿Qué pasa si no conozco las dimensiones exactas?
Cualquier valor que coincida con la relación de aspecto real funciona — por ejemplo width="16" height="9" para una imagen 16:9, incluso si en realidad se muestra mucho más grande. Lo que importa es la proporción, no los números absolutos.