Add Dimensions to Images: Stop Layout Shift (CLS)

What This Means

Every image has an intrinsic size, the real pixel dimensions of the file. When you publish one without declaring those dimensions in the HTML, the browser cannot know how tall or wide it will be until it has downloaded enough of the file to measure it. Until that moment it guesses, usually by collapsing the image to zero height, and lays out the rest of the page around that guess.

When the real image finally loads, the browser corrects the space, pushing every element below it down the page. That correction is the "jump" users see. Lighthouse and similar tools surface this as Image elements do not have explicit width and height, also worded as Add dimensions to images.

Why It Matters (The CLS Link)

Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much visible content moves around unexpectedly while a page loads. Unsized images are one of the most common causes of a poor CLS score. According to Google's web.dev guidance, when you specify width and height attributes the browser can allocate the correct amount of space in the document while the image is still loading, so nothing shifts when it arrives.

A shifting layout is not only a scoring problem. A reader who taps a button can have it slide out from under their finger as a banner loads above it. For the full picture, see our complete guide to Cumulative Layout Shift. A large hero image can also be your Largest Contentful Paint element, so sizing it correctly supports your LCP score as well.

How It Gets Flagged

Lighthouse scans every <img> element on the page and checks whether both a width and a height are declared. An image passes when both values are present, either as HTML attributes or as explicit (non-percentage) CSS sizes. It fails when one or both are missing. The audit lists each offending image so you can find and fix it.

How To Fix It

Add width and height attributes to the HTML that match the image's natural pixel ratio. The numbers do not have to equal the displayed size; the browser uses them only to work out the aspect ratio, then reserves the matching space.

<!-- Tell the browser the natural ratio (here 1600 x 900) -->
<img src="/images/header.jpg" width="1600" height="900" alt="Team at work">

For a responsive layout, keep those attributes and add CSS so the image scales to its container while preserving the ratio. The key is height:auto, which lets the browser compute the height from the declared ratio:

img {
  max-width: 100%;
  height: auto;   /* preserves the ratio from the width/height attributes */
}

If the markup cannot carry width and height attributes, you can reserve space in CSS with the aspect-ratio property instead:

img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* browser reserves the box before load */
  height: auto;
}

In WordPress and most modern CMS platforms, the editor adds width and height automatically when you insert an image through the media library, so re-inserting images is often cleaner than hand-editing. For a wider treatment of naming, alt text, sizing, and compression, read our complete image SEO guide.

False Positives

Not every flagged image actually causes a shift. Watch for these cases before spending time on them:

• Absolutely positioned images. An image set to position:absolute or fixed is removed from normal flow and cannot push other content, so it will not shift the layout even if Lighthouse flags it.
• Percentage-only sizing. Lighthouse has historically still flagged images sized purely with percentage CSS (for example width:100%) because a percentage does not give it a concrete ratio. Add the attributes to clear the warning even when the image already behaves well.
• CSS background images. The audit only inspects <img> elements, so a background image is not covered here, though it can still shift content and should be sized through its container.