Client Hints for Images

Client Hints let a browser communicate selected device and network characteristics so a server or CDN can tailor image responses. For image delivery, `DPR`, `Width`, and `Save-Data` can help choose an appropriate resource without sending unnecessarily large images.

Client Hints are HTTP request headers that a browser may send when the server has opted into them. For responsive image delivery, `DPR` describes the device pixel ratio, while `Width` communicates the intended rendered width of an image resource when the browser has that information available.

A server enables hints with the `Accept-CH` response header. For example, `Accept-CH: DPR, Width` asks the browser to make those hints available on subsequent requests, subject to browser policy and the hint's support. The server can then use the received values when selecting or transforming an image.

`Save-Data` is a user-agent hint indicating that the user has requested reduced-data behavior. An image service can respond by selecting a smaller resource, lower quality, or another data-saving representation. The hint is a signal, not permission to ignore layout or accessibility requirements.

Client Hints work particularly well with a CDN or image transformation service because the edge can vary image responses according to request characteristics. Caching must be configured carefully: if the response differs according to a hint, the cache needs an appropriate variation strategy, otherwise one client's representation can be incorrectly reused for another request.

For many modern applications, HTML responsive-image features such as `srcset` and `sizes` remain important because they let the browser choose among declared resources. Client Hints are complementary: they can give infrastructure additional request information for server-side image selection or transformation.

Key points

• `DPR` communicates device pixel ratio for image selection.
• `Width` can communicate the requested image's intended display width.
• `Save-Data` signals a preference for reduced data usage.
• Servers opt into client hints with `Accept-CH`.
• Hint-dependent responses require deliberate cache variation.

Interview questions

What are Client Hints, and why are they useful for image optimization?

Client Hints are HTTP request metadata that a browser can provide to a server after the server opts into particular hints. For images, values such as `DPR` and `Width` can help an image service select an appropriately sized representation. `Save-Data` can also indicate that the user prefers reduced data usage. This can reduce unnecessary image bytes while preserving an appropriate visual result.

What is the difference between `DPR` and `Width` for image delivery?

`DPR` describes the device pixel ratio, such as the relationship between physical device pixels and CSS pixels. `Width` communicates the requested image width in CSS pixels when the browser provides that hint. An image service can combine these values to determine how many source pixels are useful for the rendered image. They therefore describe different dimensions of the image-selection problem.

How does a server enable Client Hints?

A server can send an `Accept-CH` response header listing the hints it wants the browser to provide. For example, it can request `DPR`, `Width`, and `Save-Data`. Subsequent eligible requests may then contain those request headers. Exact browser behavior can depend on the hint, request context, and browser policy, so an application should not assume every request contains every requested hint.

What cache problems can Client Hints create?

If an image response changes according to a Client Hint, a cache must distinguish representations that depend on different hint values. Otherwise, a cached image generated for one request can be served to another request with different requirements. HTTP cache variation mechanisms such as `Vary` can express relevant request-header dependencies, while CDN-specific image systems may provide their own cache-key configuration. The important design task is to make the cache key agree with the dimensions that actually affect the representation.

Would you use Client Hints instead of `srcset` and `sizes`?

Usually I would treat them as complementary rather than interchangeable. `srcset` and `sizes` give the browser explicit responsive-image candidates and sizing information, while Client Hints can provide infrastructure with request metadata for server-side selection or image transformation. A CDN can use hints to generate or select an image representation, while HTML responsive-image markup remains useful for browser-side resource selection. The choice depends on the image pipeline, caching model, browser support, and operational requirements.