HTTP Headers
DPR
HTTP Header
The HTTP DPR request header provides device client hints about the client device’s pixel ratio (DPR).
This ratio indicates the number of physical device pixels that correspond to each CSS pixel.
This hint helps in selecting image sources that precisely match the screen’s pixel density.
It functions similarly to the x descriptors in the <img> srcset attribute, enabling user agents to choose the most appropriate image based on screen resolution.
If a server utilizes the DPR hint to determine which resource to send in response, it must include the Content-DPR header in its response.
The client should then use the value from Content-DPR for layout purposes if it differs from the value in the request’s DPR header.
In case the DPR header appears multiple times in a message, the last occurrence will be used.
Servers that support the DPR client hint generally specify it in the Vary header, informing caches that responses may vary based on this header’s value.
Syntax
Use the following syntax for DPR:
DPR: <number>Directives
The client device pixel ratio.
Example
A server must first opt in to receive the DPR header by sending the response header Accept-CH containing the directive DPR.
To do this, the server includes the following header in its response:
Accept-CH: DPRSubsequently, on later requests, the client may include the DPR header:
DPR: 2.0If a request with the DPR header is for an image resource, the server’s response must include the Content-DPR header:
Content-DPR: 2.0
How to Modify Header using Requestly
Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the DPR header. This is especially useful for testing how your application handles different device pixel ratios, which can affect image quality and layout on various screens. Steps to Modify the DPR Header:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter DPR.
- In the “Header Value” field, enter your preferred device pixel ratio value (e.g., 2).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
- Save the rule.
Once set up, Requestly will inject the DPR: 2 header into all matching requests, allowing you to simulate different screen pixel densities and test how your server or application adapts images and layout accordingly.
Table of Contents
- No headings found.
