image breakpoint srcset - what to do with larger images used in middle viewport sizes?

Question

I've been working on a new responsive website design and I have a gallery containing a grid of images which when the browser viewport is 768px or above spans 4 columns wide (so each image is about 25% of the viewport). Anything 767px or lower is only 1 column wide (making it full width at lesser resolutions).

The images at desktop size (over 768px) should be 220px wide (4 image columns).
Between 480px and 767px should be upto 420px wide (1 image column).
And mobile size (under 479px) should be upto 260px wide (1 image column).

I have three sources for each image. 220px, 260px and 420px.

As you can see from the above, the sizes don't follow the normal conventions of the smaller the viewport the smaller the image, so I've been researching and trying various options.

Following suggestions, I've been using Google Chrome in incognito mode and also inprivate browsing for internet explorer, with the browser viewports started small before loading the page, etc... to ensure any changes I've been making get updated.

The current code I've come to is the closest I've got to making it work and it is following an answer to someone's query (similar to mine) here on stack overflow. However, when trying to implement it I can't seem to get the browser to load the right images still, it always loads the larger 420px wide image.

my code is currently like so:

<img sizes="(min-width: 767px) 420px, 100vm"
    srcset="images/thumbs/image_420.jpg 420w,    
            images/thumbs/image_260.jpg 260w,    
            images/thumbs/image_220.jpg 220w"    
       src="images/thumbs/image_220.jpg"
       alt="example image"
/>

A second query whilst I'm on the subject. Would it be best to set the default img src in my scenario to the 260px image? As this would cover both desktop and mobile browsers in the event the srcset isn't understood and only the middle sized viewport (460-767px) would suffer. Or is it always best to set the default image to the smallest size?

Any suggestions would be appreciated, thank you.

-- EDIT --

Just a quick update, I thought I'd logically figured it out yesterday but it didn't work so I'm not sure I still understand the whole concept of the calculations. My latest edit looks like so:

<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
    srcset="images/thumbs/image_420.jpg 420w,    
            images/thumbs/image_260.jpg 260w,    
            images/thumbs/image_220.jpg 220w"    
       src="images/thumbs/image_260.jpg"
       alt="example image"
/>

So in my mind I think that the sizes section I've listed states... if viewport is at least 460px then use the 420px image, else if viewport is at least 768px use the 260px image. Then the last 100vm means otherwise use whichever is best at full viewport width. I've also amended the default file to be the 260px file as this fits most of the viewport sizes if something hasn't been recognised.

However, the above edit still loads only the 420px image.

Any suggestions would be very appreciated. Even if its just to correct my logic!

zcorpan zcorpan · Accepted Answer · 2016-03-02T12:23:17

sizes is evaluated left-to-right. So the order is important. If the viewport is 1000px, then the first media condition (min-width: 460px) will match, and so that size 420px is chosen, and the rest of the sizes attribute is not evaluated at all.

Also, the unit should be vw, not vm.

So it should be:

<img sizes="(min-width: 768px) 220px, (min-width: 460px) 420px, 100vw"
     srcset="images/thumbs/image_420.jpg 420w,    
             images/thumbs/image_260.jpg 260w,    
             images/thumbs/image_220.jpg 220w"    
        src="images/thumbs/image_260.jpg"
        alt="example image"
/>

As for your second query, technically you can choose any image you like (even one not listed in srcset), but your reasoning makes sense to me. The only thing I would recommend is to put your chosen src image first in srcset, because older WebKit with partial x-only srcset implementation will pick the first item when it doesn't understand the descriptors.

image breakpoint srcset - what to do with larger images used in middle viewport sizes?

1 Answers