Leaner Responsive Images with Client Hints
It was all the way back in 2014 that I first talked about client hints when it came to providing better decisions on what image/video to send down the wire and save on bandwidth. Now Chrome and Opera support client hints but it is still very much a
work in progress for now.
This article looks at a possible solution that it could offer by having the sizes attribute still specifying the media queries and the available space that the image should take up (100vw, 50vw etc), but instead of lots of src-set we include a single
image url in the src.
It would then be the servers responsibility to select the appropriate image size to match the sizes specification from the html and the client hints for DPR and resolution.
There is a lot of negative comments which you should also read and get a feel for what concerns there are over this approach.
Is it the best approach? Well it’s another tool in our web developer belt that we can pull out progressively and use where it’s best fit.
This article will not demonstrate the challenges of responsive images. Several other sources have already done that. Instead, we’ll focus on how to address the issues, with a little help from the web server and a new way for the browser, or client, to request images with specific properties. Even if this is called “Client Hints”, it is pretty specific. Let’s dive in!
An excerpt from Leaner Responsive Images with Client Hints
