Art-direction solution works on mobile, but resolution-switching solution does not

MDN Learn
14

based on your srcset width descriptor and the sizes attribute, the browser computes the pixel density.
for example if the intrinsic width you specify is 500w and the size is 250px, then the density is 2x.
after calulating all the densities, the browser selects the most adequate asset for the device.
anyway, its only a hint for the browser and the behavior is not guaranteed.

your mobile browser selects the bigger image because it improves the quality of the image.
if for example the the screen width is 500px,
then, if it takes the 500px version, then the density is 1x
and if it takes the 1000px version, the density will be 2x (remember that you have set max-width: 100% in the css)

if the screen density is 2x for example, it will probably prefer the 2x version,
but if the screen density is only 1x, it will probably prefer the 1x version, because taking the 2x version is waste of bandwidth for nothing

for more information see the spec here:
https://html.spec.whatwg.org/multipage/images.html#image-candidate-string

anyway, if you change the markup from:

<img srcset="/assets/resolution_switching-small-version.jpg 500w,
             /assets/resolution_switching-original.jpg 1000w"
     sizes="(max-width: 800px) 500px,
            1000px"
     src="/assets/resolution_switching-original.jpg" alt="Paris" />

to:

<img srcset="/assets/resolution_switching-small-version.jpg 500w,
             /assets/resolution_switching-original.jpg"
     sizes="(max-width: 800px) 500px,
            1000px"
     src="/assets/resolution_switching-original.jpg" alt="Paris" />

though not recommended by the spec as it says:

If an image candidate string for an element has the width descriptor specified, all other image candidate strings for that element must also have the width descriptor specified.

it seems like it shows the smaller image on small screens and the bigger image on big screens

1 Like