Error de conexión. Inténtalo de nuevo.

Saltar al contenido
SEO Tools
Ayuda y documentación
Velocidad Impacto medio Fácil 5 a 15 minutos

Dimensiones de la imagen (ancho/alto)

Sin dimensiones de imagen, el diseño salta (CLS).

Qué es

Cuando un <img> no tiene ancho ni alto especificados, el navegador no sabe cuánto espacio ocupará la imagen hasta que se carga y, una vez que llega, el contenido "salta". Esto se mide mediante la métrica CLS (Cumulative Layout Shift).

Por qué importa

El salto de diseño es frustrante (el usuario hace clic en algo distinto a lo previsto) y Google lo penaliza a través de CLS en Core Web Vitals.

Cómo hacerlo

  1. 1Especifique el ancho y el alto de todos los elementos <img> (el navegador calcula la relación de aspecto a partir de ellos).
  2. 2Alternativamente, reserve espacio mediante la relación de aspecto en CSS.
  3. 3Lo mismo se aplica a las incrustaciones y los anuncios: reserve espacio para ellos.

Ejemplo

Incorrecto
<img src="photo.webp" alt="...">
Correcto
<img src="photo.webp" alt="..." width="800" height="600">

Conclusión

Agregar dimensiones de imagen es una tarea de cinco minutos con un impacto directo en CLS, uno de los Core Web Vitals. Combínalo con carga diferida y formatos modernos. Reserve espacio para incrustaciones y anuncios también, para que nada salte.

Temas relacionados