<b>aspect-ratio: the modern fix for image CLS</b>

<b>aspect-ratio: the modern fix for image CLS</b>

You know CLS — Cumulative Layout Shift — loves jumping images. The classic fix is width and height attributes, but for responsive images that scale with the screen, there's a cleaner tool.

Think of it like telling the browser the <i>shape</i> of the box, even when you don't know the exact size yet. It reserves the right proportions, so nothing jumps when the image arrives.

1. In CSS, add <code>aspect-ratio: 16 / 9</code> to your image (match your real ratio).
2. Set <code>width: 100%</code> and <code>height: auto</code> so it scales cleanly.
3. The browser now reserves correctly-shaped space upfront.

This pairs perfectly with width/height attributes — belt and suspenders.

This one's easier than it sounds, just two CSS lines.

Try this: apply it to one gallery image, reload on slow network, and watch the jump disappear.