DPR Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify DPR header The DPR (device pixel ratio) header is an HTTP client hint header that provides the browser with the device pixel ratio. This comes in handy for responsive image delivery; different images can be served depending on the DPI of the user's device, optimizing load times and bandwidth.

Syntax

DPR: <number>Copy

The header value is a decimal number indicating the device pixel ratio. For instance, a ratio of 2.0 means the device has twice the standard number of pixels per square inch.

Directives

There actually aren't any directives for the DPR header; its value is just a number, which represents the pixel density ratio of the device display.

Examples

An example of a DPR header would be:

DPR: 2.0Copy

This means the device's pixel density is twice as high as the standard device.

Browser Compatibility

How to modify DPR header

(ModHeader is a chrome extension that lets you modify request headers)

1. Install the ModHeader Chrome extension.
2. Click on the ModHeader icon in the toolbar, and the extension's interface should appear.
3. In the "Request Header" section of the interface, input "DPR" in the "Name" field.
4. In the adjacent "Value" field, input the desired device pixel ratio (e.g., 2.0).

Modifying the DPR header can help test how a website would perform on devices with different pixel densities without needing the actual hardware. For developers, this can be extremely useful for testing responsive designs and optimizing image delivery based on different device DPIs.