Reserva espacio para que las imágenes no desplacen el texto

Abres una página, empiezas a leer y, justo cuando vas a pulsar un enlace, aparece una foto y el párrafo cae varios centímetros. El archivo puede estar bien comprimido. El fallo está en el HTML: el navegador no sabía cuánto sitio debía reservar.

Ese salto tiene nombre, layout shift, y forma parte de lo que mide CLS. web.dev señala las imágenes sin dimensiones entre sus causas habituales. Da un poco de rabia porque muchas veces se corrige con dos atributos de toda la vida.

Reserva la caja antes de que llegue la imagen

Una imagen no debería abrirse paso cuando termina de descargar. Su caja puede existir desde el primer cálculo de la página, aunque dentro todavía haya un color plano o un esqueleto. Así, el titular, el texto y los botones se colocan bien desde el principio.

Aquí hay una trampa pequeña: un placeholder solo ayuda si ocupa el mismo espacio que el contenido final. Si primero mide 200 píxeles y la foto acaba midiendo 360, el salto simplemente llega más tarde.

width y height siguen siendo útiles

En una imagen de 1600 × 900, añade esas dimensiones al HTML: <img src="portada.webp" width="1600" height="900" alt="…">. El estándar HTML indica que ambos atributos se convierten también en una pista de proporción. El navegador puede reservar la caja 16:9 antes de recibir el archivo.

Eso no obliga a mostrar la imagen a 1600 píxeles. El CSS puede mantenerla fluida con width: 100% y height: auto: usa en HTML las dimensiones del archivo y deja al CSS escalarlo dentro de su contenedor. MDN explica además que aspect-ratio solo influye cuando al menos una dimensión sigue siendo automática.

Reserva también tarjetas, vídeos y módulos tardíos

Para una miniatura generada por el CMS, un vídeo incrustado o un módulo que llega después, reserva el contenedor con aspect-ratio o una altura mínima razonable. Si varios recortes comparten formato, fija esa proporción en el componente; si cambia entre móvil y escritorio, documenta ambas cajas.

No conviene inventar una altura enorme por si acaso: dejará un vacío innecesario. Elige la proporción real, decide cómo recorta object-fit y comprueba que el contenido final no se deforma ni desborda la caja.

Prueba la versión lenta

La revisión útil no empieza con la página ya cargada. Abre las herramientas del navegador, limita la red y recarga desde arriba. Mira el titular, el primer enlace y cualquier botón cercano a una imagen. Si se mueven, el prototipo todavía oculta una decisión de tamaño.

Yo dejaría esa comprobación en la lista de entrega junto al recorte y el texto alternativo. Se tarda un minuto y evita que alguien pulse un enlace que acaba de moverse justo debajo del dedo.