Image Aspect Ratio Test
The Image Aspect Ratio Test scans every <img> on a page and checks whether it declares both width and height attributes (or a CSS aspect-ratio property) so the browser can reserve the correct space before the image loads. Missing dimensions are the leading cause of Cumulative Layout Shift — the page jumps as images pop into place — which directly hurts Core Web Vitals scores and degrades the user experience.
What This Tool Checks
- Width and height attributes on every <img>
- CSS aspect-ratio property as alternative to attributes
- Mismatch between declared dimensions and actual image dimensions
- Background images that should use aspect-ratio CSS
- Per-image contribution to CLS score
- Lazy-loaded images without reserved space
Why It Matters for SEO
Cumulative Layout Shift is one of three Core Web Vitals Google uses as a ranking factor. CLS measures how much visible content jumps around as the page loads. The single biggest cause is images that load without reserved space — the page reflows and pushes everything below them down. Adding width and height attributes to every image is a one-line fix per image that often takes CLS from "Poor" (>0.25) to "Good" (<0.1) on its own.
How to Fix It
Add the actual width and height attributes to every <img> tag — modern browsers calculate aspect ratio from these and reserve the correct space even when CSS scales the image to 100% width. Use CSS aspect-ratio for background images. Re-test CLS in Lighthouse to confirm improvement.
How It Works
We walk every image element in the DOM, capture the declared width / height attributes and CSS dimensions, then fetch each image with a HEAD request to read its actual dimensions. Mismatches and missing dimensions are flagged as CLS contributors with the visible jump distance estimated.
Common Mistakes to Avoid
- CSS-styled images relying on width: 100% with no height attribute
- Lazy-loaded images with no reserved space (causes mid-scroll jumps)
- Stripping width / height attributes during a CMS migration
- Aspect ratio mismatch between attributes and the actual image
- Background images via CSS without aspect-ratio set
Quick Checklist
- Every <img> has width and height attributes
- CMS templates preserve dimensions on upload
- CSS uses aspect-ratio for non-img containers
- Lazy-loaded images have reserved space
- CLS score in Lighthouse below 0.1