About this tool
Audit picture and img sizes exports before release so responsive slot predictions stay aligned with rendered widths and critical templates avoid over-fetching.
The Image Picture Sizes Attribute Coverage Checker evaluates whether the sizes attribute on img and source elements accurately predicts the rendered slot width at representative viewport sizes. It compares the sizes expression's computed output against the actual rendered width at mobile, tablet, and desktop breakpoints, flagging entries where the prediction overshoots or undershoots by a meaningful margin. Accurate sizes values are critical for the browser to select the right srcset candidate without downloading an unnecessarily large image.
- Parses rows in URL|asset-id|sizes|viewport-width|rendered-width|status|context format and normalizes URLs with an optional base URL.
- Evaluates the matched sizes candidate per viewport, compares expected slot width against observed rendered width, and flags severe mismatch outliers.
- Tracks missing default sizes fallbacks, delivery status instability, and page-level critical over-fetch width budget overflow.
How to use Picture Sizes Coverage Checker
Submit a URL and the tool renders the page at multiple viewport widths, measures each image's actual rendered slot size, and evaluates the sizes attribute's computed prediction at the same widths. Rows where the delta exceeds your configured threshold are surfaced with the exact pixel overshoot and the srcset candidate the browser would select under each scenario. Tighten your sizes expressions based on the report, then re-audit to confirm accurate predictions across viewports.
When this tool is useful
- Audit picture and img sizes declarations before release when responsive templates rely on media-specific slot sizing.
- Catch sizes expressions that over-predict slot width relative to real rendered containers across sampled viewports.
- Prioritize hero/LCP assets where sizes mismatch can trigger larger candidate selection and inflate critical image bytes.
Practical tips
- Sample at least one mobile, tablet, and desktop viewport for each critical asset so sizes drift is visible before launch.
- Keep a default sizes fallback candidate in each expression so unsupported media conditions still resolve predictably.
- Treat large positive slot-width deltas as an optimization queue because they usually indicate avoidable over-fetch.
Why people use this tool
The sizes attribute is the browser's only pre-layout signal for choosing among srcset candidates. When it overpredicts slot width, the browser selects a larger candidate than necessary, wasting bytes on every page load. When it underpredicts, users receive a lower-resolution image that appears blurry on their display. Getting sizes right is one of the highest-leverage optimizations for responsive images because it directly controls which variant the browser downloads before the layout engine even runs.
Related search intents
image sizes attribute checker, picture sizes coverage checker, responsive image slot width audit, sizes attribute validator.