Glossary
Device pixel ratio
Why the same page is 1,350 pixels wide on one screen and 2,700 on another.
By Roger Campos · Last updated: September 2026
TL;DR
Device pixel ratio (DPR) is the number of physical screen pixels that draw one CSS pixel. A standard monitor has a DPR of 1; most phones and retina laptops have 2 or 3. Layout is the same at every DPR, but images and screenshots need DPR times as many pixels to look sharp.
Free plan, no credit card. 1,000 credits a month.
How it works
CSS pixels and device pixels
CSS describes layout in CSS pixels. The browser maps them onto the screen's physical pixels at the ratio window.devicePixelRatio reports. At DPR 2 a 100 × 100 CSS-pixel box covers 200 × 200 device pixels: the layout is identical, and there are four times as many pixels to draw it with. Text and vectors use them automatically; bitmaps only look sharp if they have them.
That is what srcset is for. The browser picks the image candidate that matches its DPR, so a retina screen downloads the 2x file and a standard one the 1x:
<img src="/hero-800.jpg" srcset="/hero-800.jpg 1x, /hero-1600.jpg 2x" width="800" height="450" alt="">In practice
What it changes in a screenshot
A screenshot at DPR 2 is twice as wide and twice as tall as the same capture at 1 — four times the pixels, and a much larger file. The page is also served its high-resolution images, so the capture shows what a retina visitor sees. The cost is height: an image has a maximum size in device pixels, so at DPR 2 a full-page screenshot covers half as much of the page.
| Setting | Viewport (CSS px) | Image width | Page height that fits in 16,384 px |
|---|---|---|---|
| Scale 1 | 1350 | 1350 px | 16,384 CSS px |
| Scale 2 | 1350 | 2700 px | 8,192 CSS px |
| Scale 3 | 390 (phone) | 1170 px | 5,461 CSS px |
URLpipe
With URLpipe
/screenshot takes device_scale_factor from 1 to 3 in screenshot_options, with viewport_width from 320 to 1920. For a phone capture as a phone shows it, use a 390 px viewport at scale 3:
{
"url": "https://example.com",
"sync": true,
"screenshot_options": { "viewport_width": 390, "viewport_height": 844, "device_scale_factor": 3, "full_page": false }
}Try it
Device pixel ratio (DPR), on a page you choose
Related terms
FAQ
Frequently asked questions
Recent iPhones report 3, some older and lower-cost models 2. Check window.devicePixelRatio in the browser to be sure.
No. Media queries and layout use CSS pixels, which are the same at every DPR. Only how many physical pixels draw them changes.
1 for thumbnails and diffs, where file size matters; 2 when the image will be viewed on retina screens or zoomed.
See it on your own pages.
Free plan, no card. Confirm your email and your API key is live — you'll be making real requests in minutes.