Client hints

Client Hints are a set of HTTP request header fields for proactive content negotiation allowing clients to indicate a list of device and agent specific preferences. Client Hints enable automated delivery of optimized assets like the automatic negotiation of image DPR resolution. 

Use of client hints isn't automatic: rather, servers must announce that they support client hints. Servers announce support for Client Hints using the Accept-CH (accept client hints) header or an equivalent HTML meta element with the http-equiv attribute.

Accept-CH: DPR, Width, Viewport-Width, Downlink

and / or

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink">

When a client receives the Accept-CH header, if supported, it appends Client Hint headers that match the advertised field-values. For example, based on Accept-CH example above, the client could append DPR, Width, Viewport-Width, and Downlink headers to all subsequent requests. In the second example, the server gives the browser the hints by setting the Accept-CH meta tag.

Basically, with the Client Hints header, the developer or application can tell the browser to advertise information about itself to the server, such as the device pixel ratio, the viewport width, and the display width. The client can then give the server information about the client's environment, and the server can determine which resources to send based on that information.

Varying Client Hints

To convey to caches that different Client Hints may affect the response, the Vary HTTP header must be used.

Example varying response:

Vary: Accept, DPR, Width, Viewport-Width, Downlink

See Also

Document Tags and Contributors

Contributors to this page: Malvoz, jswisher, estelle
Last updated by: Malvoz,