I’m guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same “desktop”, “tablet”, “mobile” thinking I can also be guilty of with breakpoints.
Soooo what is the perfect way to do responsive images? Ideally we’d be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we’d send it a 457px wide image. But it’s impractical (from a lot of perspectives: creation, storage, caching) to make “one image per possible pixel width”.
There is a happy medium here. The Responsive Image Breakpoints Generator says:
Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best matchthe various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.
It takes information like your breakpoints, your resolution needs, a reasonable change in file size between versions, and the image itself to create a all the images (and responsive images markup) you need to get to this happy medium.
