Dimensiones de Imagen: Por Qué Ancho y Alto Explícitos Previenen Saltos de Layout

Introducción

Declarar los atributos width y height en cada etiqueta <img> le dice al navegador cuánto espacio reservar en la página antes de que la imagen termine de descargarse. El UXR SEO Analyzer marca las imágenes que no declaran dimensiones porque son la causa más frecuente de Cumulative Layout Shift (CLS), un Core Web Vital.

Sin dimensiones declaradas, el navegador no sabe cuánto espacio ocupará la imagen y colapsa esa área a cero hasta que el archivo carga, empujando el resto del contenido hacia abajo (o arriba) de forma visible para el usuario.

Qué Pasa Sin Ancho y Alto

En los primeros años de la web, los desarrolladores agregaban atributos width y height a las etiquetas img precisamente para reservar suficiente espacio en la página antes de que el navegador empezara a descargar las imágenes, minimizando el reflow. Esa práctica se perdió con el diseño responsivo y CSS que sobrescribía las dimensiones—pero el problema de layout shift regresó con fuerza cuando se introdujo CLS como métrica.

<!-- MAL: sin dimensiones, el navegador no reserva espacio -->
<img src="banner.jpg" alt="Banner promocional">

<!-- BIEN: dimensiones explícitas reservan el espacio correcto -->
<img src="banner.jpg" alt="Banner promocional" width="1200" height="600">

Cómo Funciona la Reserva de Espacio

Cuando declaras width y height, el navegador calcula la relación de aspecto (aspect ratio) intrínseca y reserva ese espacio en el layout desde el primer render, incluso antes de que la imagen se descargue. Esto ocurre automáticamente vía la hoja de estilos por defecto del navegador, equivalente a la regla siguiente—no hace falta que la escribas tú:

img {
  aspect-ratio: attr(width) / attr(height);
}

Alternativa: CSS aspect-ratio

La propiedad CSS aspect-ratio es una característica ampliamente disponible que permite fijar explícitamente una relación de aspecto en imágenes y otros elementos, permitiendo definir un ancho dinámico mientras el navegador calcula automáticamente el alto correspondiente. Es útil en layouts fluidos donde el ancho final depende del contenedor.

Impacto en Core Web Vitals

• CLS: la causa principal de puntuaciones altas de CLS son imágenes, anuncios e iframes sin dimensiones reservadas.
• Experiencia de usuario: los saltos de layout hacen que los usuarios hagan clic en el elemento equivocado cuando el contenido se mueve bajo el cursor.
• Ranking: CLS es uno de los tres Core Web Vitals que Google usa como señal de experiencia de página.

Casos Especiales

Caso	Recomendación
Imágenes responsivas con srcset	Declara width/height de la variante más grande; el aspect ratio se mantiene para todas
Imágenes de fondo CSS	Reserva el espacio del contenedor con aspect-ratio o altura fija en CSS
Imágenes generadas dinámicamente (CMS)	Guarda las dimensiones originales al subir el archivo y renderízalas junto con la URL

Cómo lo Detecta el UXR SEO Analyzer

El analizador inspecciona el DOM renderizado en busca de etiquetas <img> sin los atributos width y height (o sin una regla CSS aspect-ratio equivalente aplicada al elemento). Cada imagen sin dimensiones reservadas se reporta como un hallazgo de Core Web Vitals, con una estimación de cuánto podría empeorar el CLS de la página si el archivo tarda en descargar en una conexión lenta.

Relación con Otros Elementos que Causan CLS

Las imágenes no son la única causa de layout shift, pero sí la más común. Otros elementos frecuentes son los anuncios insertados dinámicamente, los iframes de video embebido y las fuentes web que cambian el ancho del texto al cargar (FOIT/FOUT). La disciplina de reservar espacio con dimensiones explícitas o aspect-ratio aplica de la misma forma a todos estos casos.

Por Qué Esto Es Fácil de Pasar por Alto

Es común que un desarrollador declare width/height correctamente en el markup inicial, pero que un componente de galería, carrusel o lightbox reemplace esa imagen dinámicamente vía JavaScript sin preservar los atributos. El resultado es que la imagen se ve correcta visualmente, pero el layout shift ya ocurrió durante la carga inicial antes de que el componente interactivo tomara el control.

Artículos Relacionados

• Guía de Implementación de Dimensiones de Imagen - Código y automatización
• CLS Explicado - La métrica de Core Web Vitals que esto mejora
• SEO de Imágenes Explicado - Guía completa de optimización de imágenes

---

Referencias

1. web.dev - Optimize Cumulative Layout Shift
2. web.dev - Cumulative Layout Shift (CLS)
3. Chrome Developers - Layout shift culprits
4. Chrome Developers - Chrome UX Report metrics