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 load…
- Results in seconds
- Pass / fail + fix guidance
- No account required
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
Put your whole site on autopilot — SEO and AI search
PositionMySite monitors every signal on this page across your entire website 24/7 — plus keyword rankings, competitor moves and AI-search readiness (llms.txt, schema, ChatGPT & Gemini visibility). When something breaks, you know before Google does.
Every feature unlocked · No commitment · Cancel anytimeFrequently Asked Questions
Browsers use them to reserve the correct space before the image bytes arrive. Without them the page reflows when each image loads, causing visible jumps and a poor CLS score.
No. The attributes set the aspect ratio used to reserve space. CSS (max-width: 100%; height: auto) still scales the image freely — the attributes only prevent layout shift before the file arrives.
A modern CSS property (aspect-ratio: 16 / 9) that reserves a placeholder area for any element. Use it for background images, video embeds and components where width / height attributes do not apply.
Yes. CLS is one of three Core Web Vitals Google uses as a page-experience ranking signal. Pages with CLS above 0.25 are treated as "Poor" and rank below pages with the same content but better CLS.
It sums the visible distance any element shifts during page load, weighted by the element's area. Lighthouse and Chrome's Web Vitals extension show the per-element contribution so you can target the worst offenders.