Eric Portis digs into how the browser decides which image to downloads when you give it <img srcset="" sizes"">
. Notably, a browser can do whatever it wants:
Intentionally un-specified behavior lets browsers provide innovative answers to an open-ended question.
Still, calculations happen based on what you give it and you can still do a good job with that part.
The very weirdest part about all this is that the sizes
attribute can alter an images “natural width”, which can lead to unexpected upscaling, a thing we’re trained to loathe. If you’re in that situation, you can either…
- use an inline
width
attribute - set an inline
style
with amax-width
- embrace the fact you might experience occassinal upscaling