When building a responsive web page, one of the goals–by definition–is to make sure the page works well on a wide variety of screen sizes. This includes how it displays any images it contains. But when an image needs to be displayed at a variety of sizes, you run into a dilemma: You want to make sure the original image is large enough to not get scaled up (and thus look pixelated) when filling the space. But at the same time, you want to avoid the performance hit of using an image that is significantly bigger than is necessary when displayed on smaller viewports.
The good thing is most browsers support responsive images, using the srcset and sizes attributes (although Edge has some known bugs in its support). In the page markup, you can supply the browser with a variety of images to choose from, along with sizing hints, which allows the browser to choose the most appropriate image for a given viewport. This can be extremely useful, both in terms of performance and art direction (e.g. using images cropped at different aspect ratios for different use cases).
But even though we have these options at our disposal, we still have to figure out, Which sizes should I actually provide? And, How do I make sure I don’t overlook anything in doing so?
RespImageLint
Thankfully, there are tools out there that can help. The one I’ll highlight today is RespImageLint. It’s a browser bookmarklet that can provide helpful assistance in making sure the images you use on page are optimized for the variety of screen sizes that the page may be viewed on.
To use the tool, you simply save the link on the RespImageLint page to your bookmarks, and then run the bookmarklet on any page you want to analyze. The tool will then analyze the page using a variety of heights and widths, checking each image on the page against a list common mistakes and best practices. It then provides a detailed report of how each image did, and what, if any steps should be taken to address any issues.
Responsive images is a useful approach to building pages that both look good, and are optimized for performance. And RespImageLint is one helpful tool for using responsive images effectively.