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 th…
- Results in seconds
- Pass / fail + fix guidance
- No account required
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>
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
A list of candidate image URLs and their widths inside the <img> tag. The browser picks the best file based on viewport size and pixel density, downloading only one file (not all of them).
Use srcset for the same image at different resolutions (responsive). Use <picture> when you also need different images per breakpoint (art direction) or different file formats (AVIF, WebP fallback).
No — never lazy-load above-the-fold images. Lazy loading delays the request, which directly hurts your Largest Contentful Paint score. Lazy load only images that start below the visible viewport.
Common sets are 480w / 768w / 1200w / 1920w, or simply 1x / 2x / 3x for fixed-width images. Generate from the source image at build time so you ship pre-optimised files.
Yes, indirectly but powerfully. Smaller images mean faster LCP, lower bounce rates and better Core Web Vitals scores — all of which feed Google's page-experience ranking signal.