Responsive Image Test
The Responsive Image Test inspects every <img> on a page and reports whether it uses modern responsive-delivery techniques — srcset, sizes, the <picture> element, or art-direction sources — to ship the right image to the right device. Pages serving the same desktop-resolution image to a mobile screen waste bandwidth, push back Largest Contentful Paint scores, and burn user data plans. Responsive images can cut mobile image bytes by 60-80% with one HTML edit.
What This Tool Checks
- Images using srcset attribute
- Images declaring sizes attribute
- Use of <picture> element with multiple <source>s
- Width and height attributes for layout reservation
- loading="lazy" on below-the-fold images
- Same image at multiple resolutions (1x, 2x, 3x)
- Modern format fallback (AVIF, WebP) inside <picture>
Why It Matters for SEO
Images are the single largest contributor to mobile page weight. Serving a 2400px-wide hero image to a 390px-wide iPhone screen wastes 5x the bytes and pushes Largest Contentful Paint past Google's 2.5-second target. Responsive images via srcset and the <picture> element solve this without touching JavaScript — the browser picks the best file from the candidate list. Combined with lazy loading, this can move LCP scores from "Poor" to "Good" on a single deploy.
How to Fix It
Generate three sizes of each content image (1x, 2x, 3x or 480w / 1024w / 1920w) and declare them in srcset. Add a sizes attribute describing the image's rendered width at each viewport. Use <picture> with AVIF and WebP sources for further savings. Set explicit width and height on every image. Add loading="lazy" to images below the fold (never above).
How It Works
We walk every <img> and <picture> in the DOM, parse srcset and sizes, then inspect each candidate URL with a HEAD request to confirm the file actually exists at the declared dimensions. Lazy-loading and explicit width/height are scored separately because both directly affect Cumulative Layout Shift.
Common Mistakes to Avoid
- Single image src serving the same resolution to every device
- Missing width and height attributes (causes layout shift)
- Images above the fold marked loading="lazy" (slows LCP)
- srcset declared but sizes missing (browser picks wrong candidate)
- <picture> with no AVIF / WebP fallback
Quick Checklist
- Every content image uses srcset with multiple resolutions
- sizes attribute present (or width hard-coded)
- Explicit width and height on every <img>
- loading="lazy" on below-the-fold images only
- Modern formats (AVIF / WebP) inside <picture>