How does the browser pick the right image using <img> “sizes” and “srcset” attributes?

Question

How does the srcset attribute determine the correct image in conjunction with the sizes attribute? Take this image for example:

<img alt="Demo image"
     sizes="(min-width: 1024px) 512px,
             100vw"
     srcset="img/banner-large.jpg 2048w,
             img/banner-medium.jpg 1400w,
             img/banner-small.jpg 800w">

(I cleared the cache in Chrome)

I thought that the last image would always be chosen (800w), because of the 512px (sizes) and the image width of 800w (srcset), but that image did not always get selected? Why?

Answer 1

The sizes attribute determines the media condition that applies to the current device width (the first media condition that applies is selected). Then, the browser checks the srcset attribute to find the image that most closely matches the slot size determined by the sizes attribute. Note that the browser chooses a larger image for high-res displays like Retina (usually chooses an image close to double the width it would choose on a "normal" resolution display). See Responsive images and Responsive images: If you're just changing resolutions, use srcset for a lot more detail on how this works.

So in your case, you would expect to get the banner-small.jpg image on a "normal" resolution device where device width is at least 1024px (and you would also expect to get that same image on smaller width "normal" resolution devices due to the larger widths of your other srcset image options).

Some reasons that you might not get the results you expect:

• Older browser versions don't support srcset
• Did not specify <meta name="viewport" content="width=device-width"> to force devices to adopt their real width when loading the page.
• Browsers may display cached images rather than selecting the closest size match from srcset (as you noted in your question).
• When attempting to display multiple sizes of the same image on a page, browsers may download only the largest image needed and use it in each instance (rather than downloading multiple images).
• If you are attempting to test image selection behavior in some sort of sandboxed iframe environment like jsfiddle, it is difficult to be sure that the browser is interpreting the size of the display pane as "device width" (I have had mixed results with srcset in these types of environments). It seems to behave reasonably in a SO snippet for browsers like Chrome and Firefox (as long as you clear the cache). See below for an example snippet (better used in your own environment) that makes it visually obvious which image has been selected when testing.

<img srcset="https://via.placeholder.com/300x150 300w,
             https://via.placeholder.com/600x300 600w"
     sizes="(min-width: 1024px) 600px,
            100vw"
     src="https://via.placeholder.com/300x150"
     alt="placeholder image">