Quick answer
Give important images stable intrinsic dimensions or an aspect ratio so the browser can reserve space before the image arrives. This reduces avoidable layout movement, but the correct dimensions must reflect the rendered asset and responsive design.
What the issue means
The rule looks for width and height attributes on <img> elements. Supplying accurate intrinsic dimensions lets the browser infer an aspect ratio and reserve space before the image loads. CSS aspect-ratio can also reserve layout space, but it does not satisfy this markup check.
Why it matters for SEO
Layout stability affects usability and can contribute to performance metrics. The finding does not prove a specific Core Web Vital score or mean every image needs hard-coded desktop dimensions.
How NOTABIS detects it
The image-missing-dimensions rule flags an image when either its width or height attribute is missing from the measured HTML. It does not evaluate CSS aspect-ratio, art direction, lazy-loading strategy, or the final rendered size on every device.
How to check it yourself
Inspect image elements and compare their declared ratio with the actual asset. Test narrow and wide viewports, slow loading, responsive sources, and images inside changing containers.
How to fix it
Add accurate width and height attributes that match the source image’s intrinsic ratio, then let CSS scale the image responsively. For example, a 1200 × 800 image can use width="1200" height="800" alongside max-width: 100%; height: auto. Do not copy display dimensions that distort the image. The web.dev responsive-images guide explains how intrinsic dimensions help avoid layout shifts.
<img src="trail.jpg" width="1200" height="800" alt="A hiker on a rocky trail">
The browser can reserve the image’s 3:2 ratio before trail.jpg finishes loading. CSS can still display it at a smaller width without changing that ratio.
When this is intentional or does not need fixing
Decorative backgrounds, dynamically sized canvases, or images whose dimensions are controlled reliably by a component may need a different implementation. Verify actual layout behaviour before changing them.
Related issues
Review missing alt text, large HTML, and real performance measurements.
Run a NOTABIS audit
NOTABIS highlights image markup that deserves inspection; validate the fix with a responsive browser test.