So in a perfect world, my website would all be 1 column wide and by my srcset images would be
desktop-image 1920w
laptop-image 1200w
tablet-image 768w
mobile-image 576w
Sorry i may have got the widths wrong, but you get the idea, using srcset in this perfect world example would work great, if i opened on a device with a viewport size of 768px I would have a far smaller image than opening on a 1080p desktop screen.
Hopefully at this point we are all in agreement.
But my sites in the real world have far more columns, in fact, most times on a 1920px viewport i may have my images spread 6 across in the row, so 1920px - 15px for each gap etc, and my images should be about 290px wide on the biggest monitor.
By the time I get down to a mobile phone size, i am now generally at 1 column per row, because if i left it at 6 the user would think my images were bullet points. So no I need an image of about 546px wide, which is almost twice as big as what i needed on the biggest monitor.
Therefore unless all my sites were a single column wide, then i honestly do not understand the HTML implementation of srcset, by my rekoning, my desktop device which needs the smallest image would actually get the largest image, and once srcset has used the largest image, even if i scaled my browser width down responsively, it would not switch image because that would be a silly waste to redownload a smaller image when i have already got the largest one cached.
I assume, I must be the only one in this boat, and therefore the only sane one, or more than likely the only incorrect person, so could someone try explain please, because I dont get it.
Last updated: