When using srcset and sizes for images, browsers seem to have very different behavior.
Firefox will 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. Personally I think this is the best approach, as it leaves no room for randomness.
Meanwhile Chrome seems to behave in a different way. It seems to pick whichever image is closest to the preferred resolution (not quite, but almost).
For example: Using DPR 1.5 with two images in the srcset, 750 px and 990 px.
- When Chrome sees a 570 px image (855 px with DPR factored in), it still requests the 750 px image. I assume that is because 855 is closer to 750 than 990. This looks blurry, though.
- Anything above 575px (863 px with DPR) and it picks the 990 px image.
In my opinion, both of these cases should pick the 990 px image (like Firefox does), because they would benefit from the quality increase.
Are there any settings to force quality over size?
What are the specific rules that Chrome uses to pick images based on srcset/sizes attributes?
