Next Generation Responsive Images with Client Hints
When enabled on a website, Client Hints will send extra device pixel ratio (DPR) and image width information.
imgix has supported Client Hints since the first day of its availability to the general public. You can take 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
<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.
Because imgix strives to be completely configurable, we require an extra URL query parameter to opt in to Client Hints functionality. This ensures 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:
will use the
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 in how Client Hints will be applied.
We’ve assembled three examples of Client Hints in action.
First, we show 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 the simplest implementation of Client Hints.
Finally, we show an example that will gracefully fall back to
srcsetvalues in browsers that do support
srcsetbut do not yet support Client Hints.
More to Come
imgix supports the
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.