An image causes Cumulative Layout Shift when the browser doesn't know its dimensions before the file arrives, so it renders a zero-height box, then resizes the page once the image loads. Explicit width/height attributes, or a CSS aspect-ratio, fix the shift regardless of file format or size.
Key takeaways
- CLS from images is a missing-dimensions bug, not a file-size bug — a 5KB image with no width/height causes the identical shift a 5MB one would.
- width and height HTML attributes still matter even when CSS controls the final display size, because they let the browser compute the intrinsic aspect ratio before any stylesheet or image byte has arrived.
- WebP and AVIF help Largest Contentful Paint, by shrinking the file so it arrives sooner — they do nothing for CLS specifically.
- Google's published CLS thresholds: under 0.1 is good, 0.1–0.25 needs improvement, above 0.25 is poor, measured across the page's full lifespan.
- This site has zero <img> tags — every icon is inline SVG with explicit dimensions, which sidesteps the entire bug class by construction rather than by discipline.
The actual mechanism
A browser lays out a page top to bottom as HTML arrives, and for most elements it can compute size immediately from CSS or content. An <img> tag is different: its true size depends on a file that hasn't downloaded yet. Without a hint, the browser has two bad options — wait for the image before laying out anything below it (slow), or render a zero-height placeholder and resize everything once the real dimensions are known (the layout shift). Modern browsers do the second, and that resize — text, buttons and other images jumping position — is exactly what Cumulative Layout Shift measures.
The fix removes the ambiguity, not the wait. width and height attributes (or a CSS aspect-ratio) give the browser the image's aspect ratio before the file itself has to answer that question, so it can reserve the correct box on the very first layout pass. The image still takes the same time to download; it just never has to un-announce a wrong guess about its own size.
| Change | Fixes layout shift? | What it actually does |
|---|---|---|
| Add width/height attributes | Yes | Lets the browser reserve the correct box before the file loads |
| Set CSS aspect-ratio | Yes | Same effect as width/height, set in CSS instead of HTML |
| Switch JPEG to WebP/AVIF | No | Smaller file, faster download — helps LCP, not CLS |
| Add a srcset for responsive sizes | No | Serves an appropriately-sized file per viewport — also an LCP lever, not CLS |
| Lazy-load below-the-fold images | Indirect | Can prevent shift caused by late-arriving images pushing visible content, if dimensions are still reserved |
This site's own approach, checked not claimed
This site ships zero <img> tags — every icon across every page is inline SVG with explicit width and height attributes set directly on the <svg> element, so there is no image-loading step for the browser to guess about in the first place. That isn't offered here as a universal recommendation — a hosting-comparison screenshot or a product photo genuinely needs a raster image, and inline SVG doesn't substitute for one. It's included because it's the actual, checkable reason this particular build-quality bug class doesn't apply to this site's own pages, rather than leaving that unstated.
Documented vs. inferred vs. unsupported
| Claim | Status | Basis |
|---|---|---|
| Missing width/height on an image can cause layout shift | Documented | Directly reproducible in any browser's Core Web Vitals / Performance panel |
| Google's CLS thresholds: good under 0.1, poor above 0.25 | Documented | Published directly in Google's Core Web Vitals documentation |
| AVIF is always smaller than WebP at equivalent visual quality | Inferred | True in many published comparisons, but the exact margin varies by image content and encoder settings — treated as a rule of thumb, not a fixed percentage |
| Switching image format improves CLS score | Unsupported | Format affects download speed (LCP), not whether the browser reserved layout space (CLS) — a common conflation in generic "image optimization" advice |
Fixing it on a site that does use images
- Set width and height on every <img> tag, matching the file's real intrinsic aspect ratio — not the display size, the source file's actual ratio.
- Or set aspect-ratio in CSS if the display size is controlled responsively and a single HTML attribute pair can't cover every breakpoint.
- Reserve space for ads and embeds too — the same missing-dimensions mechanism causes CLS for iframes and injected third-party widgets, not just <img> tags.
- Then, separately, address format and sizing for load speed — AVIF/WebP and a responsive srcset — as an LCP optimization, not a CLS fix.