hints / device
Sec-CH-DPR
Sec-CH-DPR reports the device pixel ratio to the server, enabling resolution-appropriate images without srcset gymnastics. Successor to the legacy DPR header.
- Example
Sec-CH-DPR: 2- JavaScript
window.devicePixelRatio- Available since
- Chrome 46 (2015) as DPR; Sec-CH-DPR naming since Chrome 90
- Supersedes
-
DPR(2015 draft, still honored) - Engines
- Chrome Edge Opera Firefox Safari
- References
- MDN · Specification
Sec-CH-DPR tells the server how many physical pixels back one CSS pixel: 1 on a standard display, 2 on most retina-class screens, fractional values like 1.25 on scaled Windows desktops.
Accept-CH: Sec-CH-DPR
Sec-CH-DPR: 2 Unlike the UA hints, the value is a bare number, unquoted.
What it’s for
Server-side image selection. An image service that receives the DPR can pick the right rendition without the client enumerating candidates in srcset:
GET /photos/handbag.jpg HTTP/1.1
Sec-CH-DPR: 2
Viewport-Width: 390
HTTP/1.1 200 OK
Content-DPR: 2
→ serves the 780px-wide file Note Content-DPR in the response: when you serve a different intrinsic size than the URL implies, this confirmation header tells the browser how to display it at the intended CSS size. Image CDNs (Cloudinary, Akamai, Fastly image optimizers) speak this protocol fluently; it mostly runs between browsers and CDNs rather than application code.
The 2015 generation
This hint predates the whole Sec-CH- convention: it shipped in 2015 as plain DPR, one of the original four device hints (DPR, Width, Viewport-Width, Device-Memory). Chromium accepts and sends both spellings when you opt in with the legacy name, and image CDN documentation still overwhelmingly says DPR. New configurations should request the Sec-CH- form (the Sec- prefix guarantees the header can only originate from the browser itself, not from scripts), but expect to see the bare names in the wild for years.
In JavaScript
window.devicePixelRatio // 2 on this class of display Available everywhere since forever; the header is the Chromium-only part. If you operate your own image resizing service, this plus Sec-CH-Viewport-Width and Sec-CH-Width replaces a surprising amount of client-side markup.