Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:
Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.
What’s especially surprising to me is we need to serve a different number of scaled images depending on the image itself in order to get the best performance gains possible. One image might require five versions whilst another might require nine.
Nadav also walks us through a new tool called Responsive Breakpoints which has been designed to solve a lot of these common mistakes. If we upload an image the app will let us download the scaled-down images, show us which are the optimal breakpoints for that particular image, and will then give us a clear example with markup so that we can add it straight into our designs.
This tool handles the image creation and srcset attribute creation, but I’ve also dreamed of an automated tool for sizes attribute creation. For example, the page you intend to use the image on loads up in an iframe. The iframe resizes around a bunch, watching what happens to the width of the image and recording the dramatic shifts (which are likely breakpoints). Then it intelligently creates the sizes attribute based on that information. #HotAppIdea. Which also reminds me of how nice it would be to set a <meta> tag with sizes information, since designs change.
