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
What is the device pixel ratio of an iPhone?
Does DPR change the layout?
What device scale factor should I use for screenshots?
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.