Warning Image missing width and height attributes
Why <img> needs width and height attributes to avoid layout shift, and how they interact with responsive CSS.
The validator flags any <img> that has neither a width nor a height attribute.
Example
<!-- Wrong: no size hint until the image loads -->
<img src="/hero.jpg" alt="Product hero shot">
<!-- Right -->
<img src="/hero.jpg" alt="Product hero shot" width="1200" height="600">Use the image's real intrinsic pixel dimensions (or its correct aspect ratio) — CSS like width: 100%; height: auto; can still resize it responsively. The attributes exist purely so the browser can reserve the right amount of space before the file has downloaded.
Why it matters
Without dimensions, the browser doesn't know an image's aspect ratio until enough of the file has downloaded to read it, so it initially renders the image at zero height. Everything below it then jumps down once the real size is known — this is Cumulative Layout Shift (CLS), one of Google's three Core Web Vitals metrics, and it directly affects both user experience (misclicks from content jumping under the cursor) and search ranking. Modern browsers use the width/height ratio to compute the correct aspect ratio automatically, even when CSS overrides the rendered size.
Frequently asked questions
Do width/height attributes conflict with responsive CSS?
No. Browsers use them only to compute the image's aspect ratio ahead of load; any width/height set in CSS still wins for the actual rendered size. This is standard practice on responsive sites, not a legacy fixed-layout technique.
What if I don't know the exact dimensions?
Any values matching the real aspect ratio work — e.g. width="16" height="9" for a 16:9 image, even if it's actually displayed much larger. What matters is the ratio, not the absolute numbers.