Image width and height attributes: preventing layout shift
An image with no width and height reserves no space, so the page jumps when it loads. squirrel checks both attributes on every image.
What width and height do
The width and height attributes on an <img> give the browser the image’s aspect ratio before the file arrives. It can then reserve the right amount of space and lay the page out once, instead of reflowing everything below the image when it loads.
That reflow is Cumulative Layout Shift, one of the Core Web Vitals. The attributes are a rendered-size hint as well as a ratio, and CSS overrides them: height: auto alongside a percentage width keeps the image responsive while the ratio does its job.
What squirrel checks
The rule runs on every crawled page over the images the parser extracted. It emits a single check named image-dimensions:
- Pass when the page has no images. Message:
No images on page, with a value of 0. - Warn when any image is missing
widthorheight, or has either set to a falsy value. Message:5 image(s) missing width/height (causes CLS), with the count as the value and each image listed with a markup snippet. Severity warning, weight 4. - Pass otherwise. Message:
All 12 image(s) have dimensions, with the count as the value.
Both attributes are required for a finding to pass; one on its own does not give a ratio.
Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.
How to fix it
<img src="/photo.jpg" width="1200" height="800" alt="…" style="width:100%;height:auto" />Use the image’s intrinsic pixel dimensions in the attributes and let CSS size it. height: auto is what keeps the rendered image proportional while the attributes supply the ratio.
For an image whose dimensions are unknown at render time, set aspect-ratio in CSS on the container instead. That reserves the space the same way.
| Rule ID | images/dimensions |
| Category | Images |
| Scope | Per-page |
| Severity | warning |
| Weight | 4/10 |
Enable / disable
Disable this rule
[rules]
disable = ["images/dimensions"]Disable all Images rules
[rules]
disable = ["images/*"]Enable only this rule
[rules]
enable = ["images/dimensions"]enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.
Related rules
- images/aspect-mismatch: dimensions that disagree with the CSS box, which distorts the image.
- perf/cls-hints: the other sources of layout shift on the page.
- images/offscreen-lazy: lazy images, which shift the layout hardest without dimensions.
- images/srcset: serving the right file for the reserved space.
Images findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.
References
Check your site
Run squirrel audit https://example.com and open the Images section of the report. Every image missing a dimension is listed with a markup snippet. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.