Sizes is needed when you specify the intrinsic width of the image with the w descriptor I believe. Alternatively you can specify resolution factor (1x, 2x, etc) in which case the sizes attribute is not needed and the choice of which image to download is placed on the browser in a more autonomous manner than specifying sizes.
Re:Responsive images
by chiefalchemist on Saturday June 12, 2021 @11:57AM
(#27485308)
You might be correct. Regardless, the choice is always on the browser, as it should be. It's the only one who knows the screen res, how wide and tall, the markup, etc. With all that it picks.
Again, that article I shared does a great job of explaining. I'll re-read to find out about 1x, 2x, etc.
The only time the sizes attribute is not needed when using srcset is when the rendered size of the image is fixed.
One example would be a logo that is less than 320px wide (so it fits even on mobile). In that case you can add x descriptors to give a higher quality logo on retina screens. e.g.
<img src="logo.jpg" alt="Logo" srcset="logo.jpg, logo-2X.jpg 2x">
Alternatively use an svg :)
But if the image depends on the viewport width then 'srcset' (without x descriptors but with w descriptors) and in combination with 'sizes' is the way to go.
- Look at its device width.
- Work out which media condition in the sizes list is the first one to be true.
- Look at the slot size given to that media query.
- Load the image referenced in the srcset list that has the same size as the slot or, if there isn't one, the first image that is bigger than the chosen slot size.
> ---
Where many people's understanding falls short is the essential importance of the sizes value. In short, get that wrong and the browser is more likely to pick a suboptimal image from the srcset. Put another way, focusing on the scrset - which many seem to do - doesn't help if the sizes value misleads the browser about the nature of the image needed.
I found this artcle some time ago and it changed my understanding for the better. It's not new, but it doesn't need to be.
https://ericportis.com/posts/2014/srcset-sizes/
p.s. I do a lot of WordPress work. It's fine with srcset but usually pretty bad with sizes equal. Even Gutenberg isn't much better. That's right, 35% of the internet is doing this poorly.