An <img> without width and height attributes (or an explicit aspect-ratio CSS rule) forces the browser to reserve zero vertical space until the image headers arrive, so surrounding content reflows downward when it finally loads — the classic Cumulative Layout Shift failure that drops the page out of Google's "good" CWV band and frustrates users who click on a now-moved target. AI coding tools reproduce this every time they generate a raw <img src="/hero.jpg" alt="..." /> from a prompt like "add a hero image" without pulling dimensions off the file, because the dimensions are not in the prompt and the tool treats them as optional HTML polish rather than a load-bearing layout contract. Sites using next/image, Nuxt's <NuxtImg>, or Astro's <Image> get this for free; sites that mix raw <img> into an otherwise-modern stack do not.
Low because CLS from missing image dimensions is a user-experience and ranking-signal nuisance rather than a functional or security failure, and the fix is to add two numeric attributes per image.
Add dimensions:
<img src="/hero.jpg" alt="Hero" width={1200} height={600} />
Or migrate to next/image which enforces dimensions.
Deeper remediation guidance and cross-reference coverage for this check lives in the performance-load Pro audit — run that after applying this fix for a more exhaustive pass on the same topic.
project-snapshot.performance.images-have-dimensionslow<img> and <Image> element. For <Image> from next/image, dimensions are required (or fill mode); skip those — they're handled. For raw <img>, check for width and height attributes (or explicit CSS sizing). Count.<img> elements have explicit width and height attributes (avoids cumulative layout shift).<img> elements (project uses only <Image> from next/image, which enforces dimensions)."Found N raw <img> elements; M have explicit width+height. Coverage: M/N = X%.""5 of 18 raw <img> elements missing width/height (28%)".<img src="/hero.jpg" alt="Hero" width={1200} height={600} />
next/image which enforces dimensions.