How to Fix Images Missing Dimensions (CLS)
Your audit flagged one or more images that render without width and height attributes. Without them, the browser can't reserve space before the image downloads, so surrounding content jumps as each image loads. That jump is measured by Cumulative Layout Shift (CLS), a Core Web Vital. The fix is to add explicit width and height attributes (or a CSS aspect-ratio) to every content image so the browser holds the space in advance.
What this means
The missing_dimensions check means an <img> on the page has no width and height attributes in its HTML. When the browser parses the page, it lays out text and boxes right away, but it doesn't yet know the image's size, so it collapses that spot to near-zero height. When the image file downloads, the browser reserves the real space and pushes everything below it downward. That downward shove is a layout shift.
When you set both width and height, the browser computes the aspect ratio from those two numbers and reserves a correctly proportioned box before any of the image arrives. Every major browser has mapped the HTML width/height attributes to an internal aspect-ratio hint since late 2019, so this works even in responsive layouts where the displayed size differs from the attribute values. The values aren't fixed pixel dimensions that lock your image size; they're a ratio the browser uses to hold the space. This is a warning, not an error. The page still works, but it costs you on Cumulative Layout Shift.
Why it matters
Cumulative Layout Shift is one of Google's three Core Web Vitals, alongside Largest Contentful Paint and Interaction to Next Paint, and it feeds the page-experience signals Google uses in ranking. A "good" CLS score is 0.1 or below. Unsized images are one of the most common reasons pages exceed that threshold, and they're one of the easiest to fix, which makes this a high-leverage win.
The user cost is real and separate from ranking. When an image pushes content down mid-read, people lose their place, and sometimes they tap a button or link that just moved and hit the wrong thing. That hurts engagement and conversions regardless of what Google thinks.
There's an answer-engine angle too. The crawlers and rendering pipelines behind Google's AI Overviews, ChatGPT browsing, and Perplexity fetch and render pages under tight time and resource budgets. Stable layouts with explicitly sized media are faster and more reliable to render, and images with defined dimensions are easier for machines to associate with the correct surrounding text and captions, which matters when an answer engine decides whether to cite or feature your image.
How to fix it
- 1
Add width and height attributes to every content image
Add the intrinsic (natural) pixel dimensions of the source file to the tag. To find the real size, open the image in a new tab or check the file in your media library. Set both attributes:
<img src="hero.jpg" width="1200" height="800" alt="...">. You don't need to match the displayed size; the browser only needs the ratio (here 3:2) to reserve space. Always set both, because setting only one leaves the ratio undefined and the warning stands. - 2
Pair the attributes with responsive CSS so images still scale
For fluid layouts, keep the HTML attributes and add
img { max-width: 100%; height: auto; }so the image fills its container while preserving the reserved ratio. Do not usewidth: autoon the image; it overrides the browser's aspect-ratio hint and reintroduces the shift. Withheight: auto, the browser scales the height from the width you set and the ratio it derived from your attributes, so space stays reserved at every viewport width. - 3
Use CSS aspect-ratio when you can't set HTML attributes
For CSS background images, script-driven galleries, or components where you can't add
width/heightto the tag, reserve space with theaspect-ratioproperty:.card-img { aspect-ratio: 3 / 2; width: 100%; }. The browser holds a correctly proportioned box before the image loads. This is also the right tool for responsive<picture>art direction and any container whose height depends on an async-loaded image. - 4
Fix it at the source in your CMS or component
Instead of editing images one at a time, fix the template or block that outputs them. Missing dimensions usually mean images were hand-coded, pulled from an external URL, or emitted by a custom theme or page builder that strips the attributes. Update that template so every
<img>it produces includes dimensions. In a component framework, use the framework's image component (see the code example) so dimensions are enforced by default. - 5
Re-audit and confirm CLS improved
After deploying, re-run the audit on the same URL to confirm the warning clears. To check the layout-shift impact directly, open Chrome DevTools, go to the Performance panel, record a page load, and look for layout-shift entries; the sized images should no longer appear. For field data, watch CLS in Google Search Console's Core Web Vitals report or PageSpeed Insights over the following weeks, since real-user CLS is measured across sessions and takes time to update.
Example
<!-- Plain HTML: set intrinsic pixel size, let CSS scale it -->
<img
src="/images/product-hero.jpg"
width="1200"
height="800"
alt="Blue running shoe, side view"
>
<style>
/* Scale responsively while keeping reserved space.
Never use width:auto here — it kills the aspect-ratio hint. */
img { max-width: 100%; height: auto; }
/* When you can't put width/height on the tag
(background images, CSS galleries, <picture> art direction): */
.card-img { aspect-ratio: 3 / 2; width: 100%; }
</style>
<!-- Next.js: width + height are required props, so dimensions
are baked in and CLS is prevented by default -->
<Image
src="/images/product-hero.jpg"
width={1200}
height={800}
alt="Blue running shoe, side view"
/>Raw HTML plus responsive CSS, and the equivalent in Next.js where the Image component enforces dimensions automatically.
Platform-specific steps
Images inserted from the Media Library get width and height added automatically, and WordPress core also adds lazy loading and dimensions to most images by default. Missing dimensions usually mean the image was hand-coded in a Custom HTML block, pasted from an external URL, or output by a theme. Re-insert affected images through the Media Library instead of pasting URLs, and check that no plugin or theme code is stripping the attributes.
Page builders sometimes render images through their own widgets that omit width and height. Use the builder's native Image widget rather than a raw HTML or embed block, since the native widget typically writes dimensions. If a builder still strips them, add a CSS aspect-ratio rule to the image wrapper class as a fallback so space is reserved regardless of the HTML.
In Liquid, the image_tag filter emits width and height for you: {{ image | image_url: width: 1200 | image_tag }}. Most modern Dawn-based themes already size images correctly, so check custom sections first. If you have hand-coded <img> tags in a custom section or app block, add explicit width and height attributes there.
These hosted platforms manage image markup for you and generally add dimensions automatically for images placed through the editor. If your audit still flags images, the culprit is usually a Code or Embed block where you pasted your own <img> tag. Add width and height there, or wrap the image in a container with a fixed CSS aspect-ratio.
Add width and height to every <img> in your source or templates, plus img { max-width: 100%; height: auto; } for responsiveness. In Next.js, use next/image, which requires width and height props (or fill with a sized parent) and prevents CLS by design. In other React setups, pass explicit width and height props or wrap images in a container with a CSS aspect-ratio.
Frequently asked
No. Browsers use the two numbers only to calculate the aspect ratio and reserve space; the image can display at any size via CSS. Use the image's real intrinsic pixel dimensions, then let max-width: 100%; height: auto; handle responsive scaling. What matters is that the ratio of width to height is correct.
Use HTML width and height attributes on <img> tags whenever you can. It's the simplest, best-supported approach, and browsers map it to an aspect-ratio hint automatically. Reach for the CSS aspect-ratio property when you can't add attributes to the tag, such as CSS background images, responsive <picture> art direction, or containers sized by async content. Both reserve space; they just apply in different situations.
Not if you add the responsive CSS. The attributes alone would fix the image at those pixels, but img { max-width: 100%; height: auto; } lets the image scale to its container while the browser still reserves proportional space. Avoid width: auto on images specifically, because it cancels the aspect-ratio hint and brings the layout shift back.
It's primarily a Core Web Vitals (CLS) fix, which is a page-experience ranking signal. Indirectly it helps discoverability: stable, correctly sized images are easier for Google, AI Overviews, and other answer engines to render and associate with the right surrounding text. It doesn't replace alt text; dimensions and alt text solve different problems, and you want both.
Common causes: the crawler saw a cached version with the old HTML (clear your CMS or CDN cache and re-crawl), the image is inserted by JavaScript after the initial HTML loads (set dimensions in the component or a placeholder), or a CSS rule like width: auto is overriding the hint. Also confirm both attributes are present, since setting only one leaves the aspect ratio undefined and the warning stays.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.