About this tool
Audit picture/source media exports before release so breakpoint rules stay deterministic, overlapping ranges are intentional, and critical templates avoid source-order shadowing issues.
The Image Picture Media Query Overlap Checker analyzes media conditions on picture source elements to detect viewport ranges where two or more sources both match, causing the browser to silently select the first one and ignore subsequent entries. It parses min-width and max-width conditions, identifies overlapping pixel ranges, and highlights source rows that are effectively unreachable due to earlier matches. This prevents wasted markup and unexpected image selection.
- Parses rows in URL|asset-id|media|source-type|status|context|bytes format and normalizes URLs with an optional base URL.
- Flags overlapping media ranges in the same source-type group and highlights likely unreachable rows caused by source-order shadowing.
- Tracks missing default media rows and prioritizes critical image groups where overlap risk exceeds your configured byte budget.
How to use Picture Media Overlap Checker
Provide a page URL and the tool extracts every picture element, parses its source media attributes into numeric ranges, and tests each pair for overlap within the same type branch. Overlapping rows are displayed alongside the conflicting pixel ranges and source order so you can decide whether to adjust breakpoints or reorder sources. After updating your responsive image markup, re-run the check to confirm clean, non-overlapping coverage.
When this tool is useful
- Audit picture/source exports before release when media conditions are hand-authored across multiple breakpoints.
- Catch overlapping breakpoint ranges and likely unreachable source rows before responsive templates ship.
- Prioritize hero/LCP image groups where source-order shadowing can create unstable rendering behavior.
Practical tips
- Group rows by page, asset, and source type when auditing overlap because shadowing risk is highest within identical MIME branches.
- Keep a deliberate default media row so unsupported or edge widths still resolve to a predictable fallback source.
- Treat large critical-image rows with overlap warnings as first fixes since shadowed breakpoints can silently hurt LCP consistency.
Why people use this tool
When picture source media queries overlap, the browser picks the first matching source in document order, which means carefully prepared breakpoint-specific assets may never be served. This wastes the effort invested in generating optimized crops or resolutions for specific viewport ranges and can silently deliver the wrong image size to a significant share of visitors. Clean, non-overlapping media conditions ensure every breakpoint-specific asset reaches its intended audience.
Related search intents
picture media query overlap checker, picture source breakpoint overlap audit, responsive image media conflict checker, picture element media condition validator.