Tamaños explícitos de las imágenes

Silktide comprueba que las imágenes de tu página declaren su tamaño, para que el navegador pueda reservar la cantidad adecuada de espacio para cada una antes de descargarlas. Las imágenes sin un tamaño declarado hacen que la página dé saltos a medida que se van cargando.

<!-- Problema: sin tamaño, el navegador no reserva espacio -->
<img src="hero.jpg" alt="Colección de primavera">

<!-- Solución: el navegador reserva inmediatamente un espacio de 1200x600 -->
<img src="hero.jpg" alt="Colección de primavera" width="1200" height="600">

Por qué es importante

Hasta que llega el archivo de imagen, el navegador no tiene forma de saber qué tamaño tendrá a menos que la página lo indique. Sin esa información, renderiza la página sin dejar hueco y después empuja todo hacia abajo cuando se carga cada imagen, de modo que el texto salta a mitad de frase y los visitantes tocan lo que no es al moverse los objetivos en el último momento.

Este salto se mide como cambio de diseño (layout shift), parte de las Métricas web esenciales de Google (Core Web Vitals), que además influyen en el posicionamiento en buscadores. Las imágenes sin tamaño declarado son su causa más común.

Cómo solucionarlo

Añade los atributos width y height a cada imagen y vídeo, que coincidan con las proporciones reales del archivo. El navegador los usa para reservar espacio con la relación de aspecto correcta incluso cuando escala la imagen de forma responsive.
Para imágenes responsive, mantén los atributos y deja que CSS (por ejemplo, max-width: 100%; height: auto;) haga el escalado: el espacio reservado se escala con la imagen.
Si no puedes añadir atributos, reserva el espacio en CSS con la propiedad aspect-ratio en la imagen o en su contenedor.
Comprueba tu : la mayoría insertan las dimensiones automáticamente cuando se añaden imágenes desde el editor, por lo que los tamaños que faltan suelen venir de escrito a mano, plantillas o contenido incrustado.

Cómo lo prueba Silktide

Cargar la página en un navegador real, utilizando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
Encontrar cada imagen renderizada sin un tamaño explícito — sin atributos width/height utilizables ni CSS que fije sus dimensiones.
Informar de cada imagen sin tamaño, con su ubicación en la página.

Solución de problemas

La página se ve bien cuando la cargo

Con imágenes en caché o una conexión rápida, las imágenes pueden llegar tan deprisa que no se aprecia ningún salto. Los visitantes en redes más lentas ven la misma página montarse pieza a pieza. Reservar espacio no cuesta nada cuando la imagen carga rápido y evita el salto cuando no lo hace.

¿No romperán los tamaños fijos mi diseño responsive?

No. Los navegadores modernos tratan los atributos width y height como la relación de aspecto de la imagen, no como un tamaño fijo, por lo que CSS puede seguir escalando la imagen para ajustarla a cualquier pantalla. Los atributos y el CSS de diseño responsive funcionan juntos.