Fix "Image Elements Do Not Have Explicit Width and Height"

You run Lighthouse or PageSpeed Insights, and there it is: "Image elements do not have explicit width and height." Meanwhile your Cumulative Layout Shift score is sitting in the red, your page visibly jumps as it loads, and visitors keep tapping the wrong button because content shifted out from under their thumb right as they clicked.

The warning sounds like a minor accessibility nitpick, but it's usually the single biggest lever you have on CLS. When the browser doesn't know how big an image will be, it renders the layout as if the image takes up zero space — then, the instant the file finishes downloading, everything below it lurches down the page to make room. Fixing this is mechanical, fast, and rarely touches your design at all.

What actually causes this warning?

This warning fires whenever an <img> tag reaches the browser without enough information for it to calculate an aspect ratio up front. A few different root causes usually stack together:

• Missing width/height attributes. The most common cause — the <img> tag has a src but no width or height, so the browser can't reserve space until the file downloads and decodes.
• CSS overriding intrinsic size without a ratio. Setting width: 100% in CSS without a corresponding height: auto or aspect-ratio can still leave the box height undefined until load.
• Responsive images with srcset. Serving different image files at different breakpoints doesn't remove the need for a base width and height — the ratio should stay consistent across all sources.
• Lazy-loaded and JS-inserted images. Images swapped in after the initial render (galleries, infinite scroll, below-the-fold content) skip the browser's normal space-reservation step unless their placeholder is sized in advance.
• Background images via CSS. These aren't caught by this specific Lighthouse audit, but they cause the same visual shift if their container has no reserved height.

The key insight: the browser can calculate correct on-screen space for any image the instant it knows two numbers — width and height (or their ratio). Every fix below is just a different way of supplying that ratio before the pixels arrive.

Why it matters

Layout shift isn't just visually annoying — it's a measured, scored part of how modern browsers and search engines judge a page's usability:

• Core Web Vitals score. Cumulative Layout Shift is one of the three official Core Web Vitals, alongside loading speed (LCP) and interactivity (INP), and it's used as a page experience signal.
• Mis-clicks and mis-taps. When content shifts right as a visitor reaches for a button or link, they end up tapping whatever moved into that spot instead — a frequent, quantified source of accidental ad clicks and rage-clicks.
• Perceived quality. A page that visibly jumps around while loading reads as unpolished or broken, even if every asset eventually loads correctly.
• Compounding shifts. A page with ten unconstrained images doesn't shift once — it shifts every time one more image finishes loading, stacking small jumps into a jarring, repeated experience.

Step-by-step: fix explicit width and height

1. Find the flagged images. Run Lighthouse, PageSpeed Insights, or your browser's DevTools audit to get the exact list of <img> tags missing dimensions.
2. Get each image's real dimensions. Use an Image Dimension Checker to pull the exact intrinsic width and height in pixels for every file, rather than guessing or eyeballing them.
3. Add width and height attributes to the HTML. Set width and height directly on the <img> tag using the image's natural pixel dimensions — this is what lets the browser calculate the correct aspect ratio immediately.
4. Keep images responsive with CSS. Add width: 100%; height: auto; (or max-width: 100%) in your stylesheet so the image still scales to its container, while the HTML attributes preserve the ratio.
5. Use CSS aspect-ratio where HTML attributes aren't practical. For background images, generated thumbnails, or elements without a natural width/height, set aspect-ratio: width / height; on the container to reserve the same space.
6. Size placeholders for lazy-loaded images. Give skeleton boxes or lazy-load placeholders the same aspect ratio as the final image, applied the moment the placeholder enters the DOM — not after the real image arrives.
7. Re-run Lighthouse and check the CLS score. Use an Aspect Ratio and CLS Calculator to confirm the reserved space matches the delivered image and that your CLS score has moved into the "good" range.

Common mistakes that leave CLS unfixed

1. Setting dimensions in CSS but not HTML

Sizing images purely through a stylesheet class works visually, but some rendering paths still need the HTML attributes present for the earliest layout pass. Set both — the attributes for guaranteed space reservation, CSS for responsive scaling.

2. Using width without height, or vice versa

A single dimension isn't enough for the browser to compute an aspect ratio. Both width and height (or an explicit aspect-ratio) need to be present together, or the space reservation calculation has nothing to work from.

3. Forgetting srcset and responsive variants

Teams often fix the default src image but leave srcset entries pointing to differently-cropped variants with a different ratio. If the served image doesn't match the declared ratio, the browser still shifts to correct it.

4. Only auditing above-the-fold images

Lazy-loaded galleries, infinite scroll feeds, and below-the-fold product grids cause exactly the same shift the moment they load — they just happen later in the session, which makes them easy to miss during a quick manual check.

Real-world CLS improvement examples

These are representative before/after results from adding explicit width and height (or aspect-ratio) to every image on a page:

The pattern holds across page types: the shift almost entirely disappears once every image — including lazy-loaded and responsive variants — has a declared ratio the browser can act on before the file arrives.

Comparison: which fix method should you use?

There's more than one way to supply an image's ratio to the browser. Here's how the main options compare:

Free tools: Aspect Ratio & CLS Calculator, Image Dimension Checker

Both Rebrixe tools run entirely in your browser. Nothing is uploaded to a server — ratios and dimensions are calculated locally, so you can check images and confirm your CLS math before you touch production code.

Frequently asked questions