Search Documentation

Next Generation Responsive Images with Client Hints

Client Hints sends header request DPR, Width, and Viewport to the server

Responsive images can be difficult to bring to your site due to the verbose syntax of resolution switching, or polyfill and JavaScript requirements. Deploying responsive images became easier with the general introduction of Client Hints, which 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.

When enabled on a website, Client Hints will send extra device pixel ratio (DPR) and image width information.

Request Header

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 <head> section:

<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 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 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.

The image container width is sent as a request header

Although requiring the extra ch parameter may seem less elegant, this allows for image-specific configuration in how Client Hints will be applied.

Examples

We’ve assembled three examples of Client Hints in action.

More to Come

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.

Further Reading