I’m building a new site which uses some full width images so it seemed like a good idea to use srcset to serve different sized images to appropriate devices. Here’s what I’ve got:
In Chrome (mobile, tablet and desktop) and the Android Browser it loads the appropriate image for landscape mode (eg. 1920w on my phone) and if I rotate to portrait, it shows the same image. This seems correct to me as it’s downloading the largest image that it will need.
However, in Firefox (mobile, tablet and desktop) it loads the appropriate image for the current orientation. In other words, on my phone it will show the 1920w image in landscape and the 1200w image in portrait. This means it’s downloading two images, which (to me) defeats the object of using srcset in the first place.
I can’t find this issue mentioned anywhere which makes me think I’m doing something wrong. Does anyone have any ideas or is this how srcset is designed to work in Firefox?
I believe you can put a media condition into the sizes attribute although I’ve never tested it. Assuming that it is supported it should do what you want.
On checking my desktop with srcset I can see that Firefox instantly loads each image when I resize the browser window while chrome only loads the image for the initial size that the window was open at. In Chrome you have to refresh when you’ve resized the browser window to get the new image. I believe this is what is happening on orientation also and just the different way that the browsers have implemented srcset. I believe browsers were allowed to make their own minds up about how to display the image.
Firefox’s behaviour does seem to be a waste of resources as it makes no account for how people use their browsers. I’m always resizing my browser and end up loading a new image each time I resize the browser so instead of having may be 1 large image being loaded I end up with 1 large image and then 3 or 4 more smaller images being loaded.
Thanks for that article - it’s a good read. It’s a bit tricky to get my head around but I’m not entirely sure media conditions will help in this instance as the image will always be 100% width of the viewport.
I’ve just tried it again and for me, Chrome loads the appropriate size image initially and if you make the window bigger (or rotate portrait to landscape) it will load the larger image but it doesn’t happen the other way round. This makes more sense than Firefox’s implementation but I could still be potentially serving two images to mobile users, which is not what I want to do.
I feel like I must be missing something as everyone seems to be recommending srcset/<picture> for keeping mobile downloads as small as possible.
I believe the issue is also complicated by cache in chrome and if the larger image is already in cache then it won’t bother showing any of the other images at all.
I assume you have the viewport meta tag in place when testing this out as you shouldn’t be getting the large image on your phone in landscape as that is probably only about 580px wide.
Are your images the same design (e.g. just smaller versions of the same image) or are you showing different images (art-direction) for the various images?
If you are showing different images (nuts just smaller file sized images of the same thing) then you should be using the picture element instead.
I must admit I need to a do a lot more testing on srcset and picture but so far I have just used media queries and background images to control which images are shown and to avoid loading multiple images.
AMP is something I’m planning to look into at some point but for now I’m sticking with conventional HTML.
Yep, and this seems like sensible behaviour to me. No point downloading a smaller version of the same image if the larger one is cached but it appears that Firefox disagrees.
I do have the viewport meta tag in place but the issue is complicated by DPI, so I only see the 1920 and 1200px images (my actual screen res. is 1080 x 1920).
They’re all just different sizes of the same image (no art direction) which is why I went with img+srcset. You’re right - background images with media queries would give me a lot more control. Unfortunately, the way the images and the content over the images scales means that probably won’t work for me.
I’m thinking I might have to stick with 1920px for modern/high-DPI phones and ~700px for older/low-DPI phones which doesn’t seem ideal.
Don’t forget to optimise the images anyway because sometimes you can double the image size (from the source of a hi-res image) but lower the quality more than you would for a normal image without sacrificing the visual.
Yep, that’s my usual strategy And one of the reasons why I’ve not bothered with srcset before.
What I find most puzzling about all of this is that no-one else seems to be mentioning it, which always makes me think I’m doing something wrong. Many people far, far more clever than me have come up with this spec/behaviour but it doesn’t seem to make sense. As things stand I can see the benefit in using srcset for fixed width images but for fluid it’ll cause more harm than good.
I’ve mentioned it before a while ago in these forums as I also found it strange to load multiple images but I assumed that the people doing the testing don’t open and close their browsers as much as I do
Of course the specs are deliberately ambiguous on some points to allow vendors to implement this in the best way they think fit which is why there are differences between Firefox and Chrome. I believe the main idea was to let the browser decide on what the best image to load would be based on the device/ resolution. The idea being that you couldn’t guarantee what image was going to be shown because eventually the browser will decide on a number of factors which would be the best image in this case. (It could get also more complicated if eventually bandwidth is also considered.)
A browser should be bright enough to know if a large image was already cached and then not load a smaller version as well. As srscet is still in early days I think these things will eventually get ironed out.
And one of the reasons why I’ve not bothered with srcset before.