High Performance Images

Chapter 12. Client Hints

Colin Bendell

Responsive images solve the problem of art direction, variable widths (including DPR changes), and alternate formats. While they provide a lot of flexibility, following all the best practices can result in very large amount of boilerplate HTML. (See “2014 Responsive Images HTML Spec” to see how this plays out in practice.) This approach is prone to error and exposes details on how you generate your images that can be exploited by bots.

Additionally, responsive images don’t help to address websites where we can’t control the HTML (such as many CMS platforms) or help with native applications that request images over HTTP but don’t use HTML for the UI.

Client Hints takes responsive images to the next level using content negotiation. This helps separate the delivery from the presentation. Client Hints is a standard that utilizes HTTP to negotiate between the browser and the server—just as we do for Gzip compression. With Gzip compression, the client tells the server that it is smart enough to decompress content (Accept-Encoding: gzip) and the server responds, with compressed content (Content-Encoding: Gzip). For example, the server could decide to compress CSS, but not Gzip WOFF (because WOFF is already Gzipped internally). It’s a nod and a wink between the browser and server to get bits across the network faster. The web developer and end user don’t have to worry about these details; they just know it results in a better user experience.

For ...