DPR header

{{SecureContext_Header}}{{Non-standard_Header}}

[!WARNING]WARNING: The DPR header was standardized as {{HTTPHeader("Sec-CH-DPR")}}DPR and the new name is now preferred.

The HTTP DPR {{Glossary("request header")}}header provides device client hints about the client device pixel ratio (DPR). This ratio is the number of physical device pixels corresponding to every {{Glossary("CSS pixel")}}pixel.

The hint is useful when selecting image sources that best correspond to a screen's pixel density. This is similar to the role played by x descriptors in the <img> srcset attribute to allow user agents to select a preferred image.

If a server uses the DPR hint to choose which resource is sent in a response, the response must include the {{HTTPHeader("Content-DPR")}}DPR header. The client must use the value in Content-DPR for layout if it differs from the value in the request's DPR header.

If the DPR header appears more than once in a message the last occurrence is used.

Servers that opt in to the DPR client hint will typically also specify it in the {{HTTPHeader("Vary")}}Vary header to inform caches that the server may send different responses based on the header value in a request.

Header type	{{Glossary("[Request header")}}header](https://developer.mozilla.org/en-US/docs/Glossary/Request%20header), Client hint
{{Glossary("[Forbidden request header")}}header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden%20request%20header)	No

Syntax

DPR: <number>

Directives

• <number>
  • : The client device pixel ratio.

Examples

A server must first opt in to receive the DPR header by sending the response header {{HTTPHeader("Accept-CH")}}CH containing the directive DPR.

Accept-CH: DPR

Then on subsequent requests the client might send DPR header to the server:

DPR: 2.0

If a request with the DPR header (as shown above) is for an image resource, then the server response must include the {{HTTPHeader("Content-DPR")}}DPR header:

Content-DPR: 2.0

Browser compatibility

{{Compat}}

See also

• Device and responsive image client hints
  • {{HTTPHeader("Sec-CH-DPR")}}DPR
  • {{HTTPHeader("Sec-CH-Device-Memory")}}Memory
  • {{HTTPHeader("Sec-CH-Viewport-Height")}}Height
  • {{HTTPHeader("Sec-CH-Viewport-Width")}}Width
  • {{HTTPHeader("Sec-CH-Width")}}Width
  • {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}DPR
  • {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}Memory
  • {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}Width
  • {{HTTPHeader("Width")}} {{deprecated_inline}}Width
• {{HTTPHeader("Accept-CH")}}CH
• HTTP Caching: Vary and {{HTTPHeader("Vary")}}Vary
• Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)