SJ (Scott Jehl)

Link: Swapping Images with the Sizes Attribute

photo of scott jehl profile headshot

By Scott Jehl

Over the years we’ve designed components that enable users to magnify, swipe, and pan around images in a wide variety of ways. Early on, it was tricky to build these components in ways that used image sizes responsibly, and we’d sometimes end up delivering larger images than we’d prefer–ensuring that the image would at least be sharp across all devices. Thankfully, as 'responsive' image standards have gained support we’ve been able to offload much of that source selection logic to the browser, and in that regard, one particular trick has served us really well that we wanted to share.

View here: https://www.filamentgroup.com/lab/sizes-swap/