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

If Lighthouse flags "Image elements do not have explicit width and height," it means your images have no reserved space — so the page jumps as they load. That jump is measured as Cumulative Layout Shift (CLS), a Core Web Vitals ranking factor.

Why It Matters

Without dimensions, the browser does not know how much space an image needs until it downloads. Content below it shifts down when the image appears — frustrating users and hurting your CLS score.

A good CLS is under 0.1. Missing image dimensions is one of the most common reasons sites fail it.

The Fix: Always Set width and height

Add the intrinsic (natural) pixel dimensions as attributes. The browser uses the ratio to reserve space before the image loads:

<img src="hero.jpg" width="1200" height="630" alt="Product dashboard">

You do not need to display it at that size — pair it with responsive CSS:

img {
  max-width: 100%;
  height: auto;
}

The width/height attributes give the aspect ratio; the CSS makes it responsive. Together they reserve space and prevent the shift.

In Next.js

The next/image component handles this automatically when you pass width and height (or fill):

import Image from 'next/image';

<Image src="/hero.jpg" width={1200} height={630} alt="Product dashboard" />

For Background Images

CSS background images do not cause CLS the same way, but if you use them for meaningful content, reserve space with aspect-ratio:

.banner {
  aspect-ratio: 16 / 9;
  background-image: url('banner.jpg');
  background-size: cover;
}

Checklist

1. Add width and height to every <img>.
2. Use CSS max-width: 100%; height: auto; for responsiveness.
3. Reserve space for ads, embeds, and dynamic content too.
4. Avoid inserting content above existing content after load.

Confirm It

Run your URL through SEO Snapshot — it checks images for missing dimensions and alt text, and flags Core Web Vitals risks like layout shift.