Images that push content down and cause layout shift

The symptom

You load a page and text jumps down a moment later, or every scroll reveals a photo that has not settled, and the headline moves as it loads. In Lighthouse the CLS score is above 0.1 and the audit names an image as the culprit. These are symptoms of images that arrive without a reserved layout slot.

Why images shift

When a browser parses an img tag without dimensions, it has no width and height until it downloads the file and reads its intrinsic size. The layout engine places the text assuming no image, then repaints when the image lands. That repaint is the shift. The higher the image sits in the page, the further the content below it moves. Every image without a reserved box is a candidate for CLS.

The underlying rule is simple: the browser must know the size of an image before the bytes exist. You provide that knowledge with HTML width and height, or with CSS aspect-ratio on a wrapper.

Diagnose

1. Run Lighthouse and read the CLS audit. It lists the largest contributors.
2. Look for img tags without width and height attributes.
3. Inspect the CSS: an img with width: 100% but no aspect-ratio on a small viewport still has no intrinsic height to reserve.
4. Confirm the fix target in a field report if real users see shifts, since lab may be fast.

Fix: reserve the space

Option A: width and height in HTML

<img src="/hero.webp" width="1600" height="900" alt="Winter skate team">

The ratio 1600:900 tells the browser the box is 16:9 before the file arrives. The attribute values do not need to match the CSS display width; the browser derives the ratio. For responsive layouts, the image still sizes to 100 percent of the container while keeping the ratio.

Option B: CSS aspect-ratio

.thumb { aspect-ratio: 16 / 9; overflow: hidden; }

Use this when the container, not the img tag, owns the ratio, or when the image comes from a CMS without dimension attributes. The .thumb wrapper reserves the box so the image fills it without shifting.

Handle responsive and art-directed images

When you serve responsive variants with srcset, reserve the ratio of the largest candidate. If the art direction changes the crop per breakpoint, the box must change too; you cannot hold one ratio for all viewports. See srcset semantics for the sizing rules.

Prevention

• Give every above-fold image explicit dimensions at the source.
• Keep loading="lazy" only for below-the-fold images, and give those dimensions too.
• Avoid claiming height percentages for images with unknown intrinsic sizes.

A field regression after a layout change is the signal to re-check images first because they are the most common shift source on marketing pages. The CLS optimisation guide explains the metric and the remaining shift sources (ads, embeds, fonts).

When to involve a professional

If a CMS or third party injects images after first paint, a developer should move the injection to a reserved container. If the image set uses many crops, automated sizing in the build serves consistent ratios. Start by fixing the hero, which is usually the largest shift contributor.