Next Generation Responsive Images with Client Hints
Responsive images can be difficult to bring to your site due to the verbose syntax of resolution switching, the requirement of polyfills, or the requirement of JavaScript. Deploying responsive images becomes easier today with the general introduction of Client Hints. Client Hints enable the server to send the best-sized image to a client or browser based on extra information included in the HTTP request headers. This is all done without JavaScript and at the time of the initial request.
Today, Chrome 46 was released to the general public, including support for Client Hints. When enabled on a website, Client Hints will send extra device pixel ratio (DPR) and image width information.
imgix is proud to support Client Hints on the first day of its availability to the general public. You can start taking advantage of Client Hints to deliver even better images to your end users, and because of Chrome’s popularity, more than 35% of the web has support for this feature today.
Implementing Client Hints
Configuring Client Hints on a site is extremely simple. Just include the following meta tag in the <head>:
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
The element instructs the browser to include relevant DPR, width, and viewport width information with each image request. imgix will act upon DPR and width information when present and when the ch parameter is present in the URL.
Currently, the way to leverage the resizing operations of imgix is to append URL query parameters. These are great and infinitely flexible using imgix.js, but Client Hints provides a more open interface to resizing images. By deferring this logic to the browser, you are guaranteed to deliver a pixel-perfect image to the device without requiring JavaScript.
Because imgix strives to be endlessly configurable, we require an extra URL query parameter to opt in to Client Hints functionality. This makes sure that Client Hints are explicitly applied. When the URL parameter is present, any Client Hints information will override the respective imgix URL API parameters. For example:
https://assets.imgix.net/unsplash/bear.jpg?ch=Width,DPR&w=400&dpr=2
will use the Width and DPR Client Hints when transmitted, and will fall back to an image of device pixel ratio 2 and 400 device independent pixels, i.e. an image 800 physical pixels wide.
Although requiring the extra ch parameter may seem less elegant, this allows for image-specific configuration for how Client Hints will be applied.
We’ve assembled 3 examples to show off Client Hints in action on a demo site: imgix Client Hints Examples.
First, we show off an example page that does not opt in to client hints, because it does not include the meta tag: No Client Hints Example.
Next, we provide a simple example showing off the simplest implementation of Client Hints: Simple Client Hints Example.
Finally, we show off an example that that will gracefully fall back to srcset values in browsers that do support srcset but do not yet support Client Hints: Client Hints with srcset Fallback.
imgix supports the Width and DPR hints today, but that is just the beginning. There are Client Hints on the horizon for specifying data rates of the clients, whether to prefer speed or quality, and much more. By moving this logic to the browser at the time of the image request, the gains to be seen from Client Hints are just beginning. As more are introduced, even better targeting and performance will be possible.
HTTP Client Hints (Interal Draft)
HTTP Working Group: Client Hints
imgix ch parameter documentation
Can I Use... Client Hints
Chrome 46 Announcement Video