Content-DPR Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify Content-DPR header The Content-DPR header is a response HTTP header which is crucial for handling device pixel ratio in responsive images. It defines the ratio between physical pixels and logical pixels used to display an image. It's vital in scenarios where images are shown on high-resolution screens, ensuring that users are served with high-quality images that correctly fill the pixel density of their screens, providing an optimal visual experience.

Syntax

Content-DPR: <double-value>Copy

Directives

The Content-DPR header allows only one directive.

• <double-value>: This is a decimal number indicating the physical pixel density used by an image relative to the logical pixel density. It must be greater than zero.

Examples

This is how we can set the Content-DPR to 2.0.

Content-DPR: 2.0Copy

Browser Compatibility

How to modify Content-DPR header

To modify the Content-DPR header using the ModHeader Chrome extension, follow these steps:

1. Install the ModHeader extension from the Chrome Web Store.
2. Once installed, click on its extension icon located next to the address bar.
3. In the 'Response headers' section, add a new header by clicking on the + button.
4. Specify Content-DPR as your header name and enter your desired value in the adjacent field (e.g., 2.0).
5. Save the settings.

Now, ModHeader will automatically alter the Content-DPR header in the response it receives. This can be useful, for instance, for developers wanting to test how their website's images would look on devices with different pixel densities. As stated in the browser compatibility section, however, the Content-DPR header is currently not supported by any major browsers. Hence, its manipulation via ModHeader should be primarily used for testing and experimentation.