Image Dimensions and Layout Stability

The Missing Dimensions filter finds image uses without detected width or height values. Has Dimensions provides the comparison set. Explicit dimensions help browsers calculate an aspect ratio and reserve space before the file loads.

Separate markup from measured impact

Missing dimensions create a layout-shift risk, but they do not prove that a page fails CLS. CSS aspect ratios, fixed containers, intrinsic SVG sizing, and framework image components can reserve space in other ways. Conversely, attributes can be present while incorrect CSS still shifts the layout.

<img
  src="report-cover.jpg"
  alt="Example SEO report"
  width="1200"
  height="800"
  style="max-width: 100%; height: auto;"
/>

The attributes describe the intrinsic aspect ratio; responsive CSS controls display size.

Analyze dimension findings

1. Open representative Source Pages at mobile and desktop widths.
2. Inspect rendered attributes and computed layout before the image loads.
3. Compare the declared aspect ratio with the actual file.
4. Group missing values by component and content type.
5. Check lazy-loaded and dynamically inserted images.
6. Compare the crawl signal with lab and real-user CLS data.

Do not hard-code arbitrary display dimensions just to clear the filter. Incorrect ratios can distort images or still cause movement.

Example decision

Every article hero lacks attributes and pushes text down as it loads. Update the shared image component to receive intrinsic dimensions from media metadata and preserve responsive CSS. A responsive SVG logo already occupies a fixed aspect-ratio container and causes no movement; document and test that behavior before changing it.

Verify the improvement

Throttle the network, reload representative pages, inspect layout-shift entries, and recrawl. Confirm width and height are correct in rendered HTML and measure CLS separately with PageSpeed Insights or real-user data.

Why intrinsic dimensions matter

The width and height attributes give the browser an intrinsic aspect ratio before the image downloads. This helps reserve layout space. They do not force an image to display at that exact CSS size; responsive CSS can still scale it.

Missing Dimensions is therefore a useful implementation signal, not proof that the page has poor Core Web Vitals. CSS aspect-ratio rules, fixed containers, or other layout techniques may already reserve space. Conversely, dimensions can be present but incorrect, producing distortion or a later shift.

Investigation steps

1. Open a representative source page at mobile and desktop widths.
2. Compare the markup dimensions with the file's natural aspect ratio.
3. Inspect whether the surrounding container reserves space.
4. Check field Core Web Vitals or browser performance data for actual layout shifts.
5. Fix the shared component when the pattern repeats.

For responsive images, keep a consistent aspect ratio across candidates unless art direction intentionally changes the crop.

Interpreting count changes

After adding attributes, Missing Dimensions should decrease and Has Dimensions should increase. The CLS metric may not move immediately: field data uses real-user observation windows, and the flagged images may not have caused the largest shifts. If CLS worsens, check ads, fonts, banners, and injected content instead of assuming the image change failed.

The markup should contain accurate intrinsic dimensions, descriptive alt text when needed, and responsive CSS. Read web.dev's CLS optimization guide for measurement details. Use Screpy to find missing markup, then validate the actual user experience.

Frequently asked questions

Do CSS dimensions replace width and height attributes?

CSS can reserve space, but intrinsic attributes provide the browser with an aspect ratio early in parsing. Use accurate attributes plus responsive CSS for a robust default.

Why does CLS remain high after fixing images?

Other elements may be shifting: ads, cookie banners, fonts, embeds, or injected content. Field data also updates over time. Use layout-shift diagnostics to identify the actual unstable element.

What if mobile and desktop use different crops?

Use picture sources for art direction and provide accurate intrinsic dimensions for each source where supported. Test the reserved aspect ratio at each breakpoint so changing crops do not introduce a new layout shift.

Related guidance

Return to the Images overview to compare dimensions with responsive-image and source-format findings. MDN's img element reference documents intrinsic dimensions, responsive attributes, loading behavior, and accessibility requirements.