You start reading, an image finishes loading, and everything jumps down. That's Cumulative Layout Shift, and images are its most common cause.

Why It Happens

HTML is laid out as it arrives. When the browser encounters an image whose dimensions it doesn't know, it reserves zero height, lays out the text below it, and only when the image data arrives does it discover the real size — forcing everything below to move.

The Fix: Tell the Browser the Size

Put width and height attributes on every img element, with the image's intrinsic pixel dimensions. Modern browsers compute the aspect ratio from those two numbers and reserve correctly-proportioned space even when your CSS makes the image fluid.

This is the part people get wrong: it feels contradictory to write width="1600" height="900" on an image styled with width: 100%. It isn't. The attributes provide the *ratio*; the CSS still controls the rendered size. You need both, plus the standard responsive rule that sets height to auto so the image isn't distorted.

When You Don't Know the Dimensions

Sometimes the size is genuinely unknown until runtime — user uploads, CMS content, third-party feeds. Options:

  • Set an aspect-ratio in CSS on the container and crop with object-fit. The space is reserved regardless of what arrives.
  • Store dimensions in your CMS at upload time and emit them into the markup. This is the robust solution for any content-driven site.
  • Use a fixed-height container with overflow hidden for decorative imagery.

Other Image-Related Shifts

  • Web fonts swapping move text around images; use font-display settings that minimise reflow.
  • Late-injected banners, cookie notices and ads above content push everything down — reserve their space too.
  • Lazy-loaded images without dimensions shift as you scroll, which counts against you just as much as an initial shift.
  • Responsive images with different ratios per breakpoint need per-breakpoint aspect ratios, or the shift returns at certain widths.

Verifying It's Fixed

  • Lighthouse reports CLS and names the shifting elements.
  • DevTools' Rendering panel has a "Layout Shift Regions" overlay that highlights shifts visually as they happen.
  • Test on a throttled connection: on fast wifi images arrive before layout matters, hiding the problem you're trying to see.

A Note on Placeholders

A solid colour block, a blurred low-quality preview or a skeleton all improve *perceived* performance, but they only fix CLS if they occupy exactly the final dimensions. A placeholder of the wrong size still shifts. Get the reserved space right first; make it pretty second.