Why it matters
srcset hands the browser a list of files and sizes tells it how wide the image will be. The browser then picks one before it has laid out the page, so a sizes value that's slightly wrong, or a missing one, quietly sends phones a desktop-sized photo. Nothing breaks visibly; the page is just slower, and the image is often the Largest Contentful Paint.
This checker runs the selection for each device in your list: which sizes entry applies, how wide that is in pixels, and which candidate Chromium downloads at that screen's pixel ratio. That rule was checked against headless Chrome's own choice on 69 random layouts. It then encodes your image at every width on this device to measure real file sizes, so you can see what each device pays, how much a single large file would cost and where sizes disagrees with your actual layout. It's a companion to the srcset generator, which writes markup from scratch.
How to use it
- Paste your <img> or <picture> markup.
- Optionally describe the real image width at each breakpoint.
- Edit the device list if you like.
- Drop in your largest image to measure real file sizes, then copy the suggested srcset.
FAQ
How does the browser choose a srcset image?
It works out the slot width from sizes, divides each candidate's w width by it to get a density, and Chromium takes the first candidate at or above the screen's pixel ratio. Browsers may also reuse a larger file they already have.
What happens without a sizes attribute?
With w widths and no sizes, browsers assume the image fills the viewport (100vw), so images in narrow columns download far bigger files than needed.
Should srcset go above 2x for phones?
Phones at 3x need wide files for full-width images. The table shows the bytes; many sites cap at 2x because 3x detail is hard to see.
Is my image uploaded?
No. It's resized and encoded in your browser to measure sizes.
Credits and licences
Sample photo: Malham limestone pavement by Paul Morris, CC0, via Wikimedia Commons.
.jpg){kind=link}