w descriptors and sizes: Under the hood

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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 a max-width
  • embrace the fact you might experience occassinal upscaling

Direct Link →