Client Hints have greatly expanded the content negotiation and cache friendliness of HTTP headers, allowing clients to advertise what they prefer to receive in response to content requests. The new Save-Data Client Hint enables a better user experience for people in low-bandwidth situations, who can now choose a "data-saving" mode in some browsers to receive web pages in a more highly-optimized format.
Chrome 49 supports the Save-Data Client Hint, and because so much of the data savings comes from image compression, so does imgix. Here's how you can use them together to deliver smaller websites to low-bandwidth users with a minimal effect on image quality, and without the need for JavaScript or cookie-based capability checks.
Implementing Save-Data with imgix
All browsers that support Save-Data will send the header, regardless of whether or not the Client Hint meta tag is present. In this way, Save-Data is a bit special compared to other Client Hints.
You will need to explicitly request that imgix serve a lower-bandwidth image in the presence of a Save-Data request from the browser by setting the ch parameter:
https://assets.imgix.net/unsplash/unsplash009.jpg?ch=Save-Data
When the user is in data-saving mode, this will automatically apply the same optimizations as imgix's auto=compress parameter. It applies more aggressive image optimization than our defaults, resulting in approximately a 50% file size savings over our standard compression with a minimum of quality loss. (For browsers that don't support Client Hints, using auto=compress is an option, but requires that the negotiation be handled in your code directly.)
Original (1200×800 pixels, 305kB)
ch=Save-Data (1200×800 pixels, 119kB)
Notes
- When any
chparameter is present, Client Hints information will override the respective imgix URL API parameters. - Chrome 49 requires that the Data Saver option be turned on for the
Save-DataClient Hint to work.
Further Reading
