Responsive images srcset not behaving as expected

Question

I am trying to implement a full screen responsive image solution with the following loose requirements

0-600px > displays small image
601-900px > displays medium image
901-2000px > displays large image

After a bit of digging, I decided to work with the dimensions for:
iphone 6 > 414x736
ipad > 768x1024

I created separate images for each screen size (art direction purposes) and used the following srcset code

<img    src="/assets/images/414X736/artGallery.jpg"
        srcset="/assets/images/414X736/artGallery.jpg 414w, 
                /assets/images/768x1024/artGallery.jpg 768w,
                /assets/images/1920x1080/artGallery.jpg 1920w">

The images have the following CSS (so it behaves like background:cover)

img {
    display:block;
    height:100vh;
    width:100vw;
    object-fit:cover; 
}

I sized my desktop monitor small, and resized until full screen, the images where substituted at the right place

However, on my phones and tablets, it consistently showed the 1920 image

Ideally, I would like to substitue the images when scaling the browser window from small to large and large to small

My understanding of srcset is that once it's loaded the largest image, it doesn't load smaller ones

Help and suggestions appreciated

On retina display it always loads the image with maximum size because of device pixel ratio — Nilesh Modak
Not always, it just calculates the pixels using the pixel ratio, so if you got x2 pixel ratio, 1000px will be 500px width on screen — Asaf M

Nicolas Hoizey Nicolas Hoizey · Accepted Answer · 2017-03-24T13:39:36

If you want to make some sort of Art Direction, you need to use <picture> instead of srcset-w.

By the way, your code misses a sizes attribute, which is mandatory if you use the srcset attribute with w descriptors.

Responsive images srcset not behaving as expected

1 Answers