What is my device pixel ratio?
This number is why an image that looks sharp on one machine looks soft on another. At a ratio of 2, every CSS pixel is drawn with four device pixels, so a site has to send a bigger image to look equally crisp. Zooming the page changes the reading, so it is a preference as much as a hardware fact.
What this number actually means
The number above is window.devicePixelRatio: how many physical device pixels your browser paints for each CSS pixel. A ratio of 1 means one for one. A ratio of 2 means a 100 by 100 CSS box is drawn with 200 by 200 real pixels, which is why text on such a screen looks smooth rather than stepped. It combines two separate things: the physical density of the panel and whatever scaling percentage your operating system is applying on top.
Your device pixel ratio is shown above. Often called DPR, it is how many physical screen pixels correspond to one CSS pixel, the unit web pages are laid out in. A standard display has a ratio of 1. High-density (Retina) displays report 2 or 3, packing more physical pixels into the same visual space for sharper text and images.
This is the number that reconciles two facts that seem to conflict: your phone has millions of physical pixels, yet CSS treats it as a few hundred pixels wide. The DPR is the multiplier. At a ratio of 2, a 400-pixel-wide CSS layout is drawn using 800 physical pixels, so everything looks crisp rather than tiny.
For anyone serving images, DPR is essential: it tells you whether to send a standard image or a higher-resolution version so it stays sharp on dense screens without wasting bandwidth on ordinary ones.
How a website reads this
This is the exact call a page makes. Nothing else is involved, and nothing is sent anywhere: the value is read in your browser and displayed to you.
window.devicePixelRatioHow many device pixels make up one CSS pixel. 1 on an old monitor, 2 on most Apple Retina displays, and awkward fractions such as 1.25, 1.5 or 2.625 on Windows scaling and Android phones. It changes when you zoom, which surprises people measuring it.
- Needs your permission
- No, it is read silently
- Can it be faked
- Partly. Changes with browser zoom, which anyone can do. Privacy-focused browsers round it to whole numbers.
- Contribution to a fingerprint
- About 1.5 bits, our own estimate. Our estimate. A handful of values dominate, but the fractional ones from Windows scaling and Android are numerous enough to split the crowd usefully. How we estimate this.
What does my device pixel ratio mean in practice?
These are the values almost everyone reports, what produces them, and the image resolution each one needs.
| Ratio | Where it comes from | Image you should serve |
|---|---|---|
| 1 | A standard density monitor at 100 percent scaling | 1x. A 400 px wide slot needs a 400 px image. |
| 1.25 | Windows display scaling set to 125 percent | 1.5x is the practical choice; browsers pick the nearest candidate above the requirement. |
| 1.5 | Windows scaling at 150 percent, or some Android phones | 1.5x or 2x. A 400 px slot needs at least 600 px. |
| 2 | Apple Retina laptops and displays, most iPhones and iPads, many Android phones | 2x. A 400 px slot needs an 800 px image. |
| 3 | High density phones, including the larger iPhone models | 3x. A 400 px slot needs a 1200 px image. |
| Other fractional values | Custom scaling, browser page zoom, or an unusual panel | Round up to the next standard step rather than generating a bespoke size. |
Browser page zoom also moves this number, so a reading that looks odd may simply mean the page is not at 100 percent zoom.
How do I use DPR to serve 2x and 3x images?
Do not read devicePixelRatio in JavaScript and swap the image yourself. The browser already knows the ratio before it starts loading, and reading it in script means the decision happens too late.
Use srcset with density descriptors when the image has one fixed display size: list image.png at 1x, image@2x.png at 2x and image@3x.png at 3x and let the browser choose. Use srcset with width descriptors plus a sizes attribute when the image is responsive and its display width changes with the layout; the browser then combines the slot width with the pixel ratio and picks a candidate on its own.
The mistake worth avoiding is serving a 3x image to everybody. It is nine times the pixel data of the 1x version, it is the single most common cause of a slow largest contentful paint on image heavy pages, and on a ratio 1 screen it looks no better at all.
Why is my device pixel ratio not a whole number?
Because operating system scaling is applied as a percentage and does not have to land on an integer. Windows offers 100, 125, 150 and 175 percent, which produce ratios of 1, 1.25, 1.5 and 1.75, and custom scaling can produce anything in between.
Browser zoom multiplies into the same value. Zooming a page to 110 percent on an ordinary monitor gives a reported ratio of 1.1, which is a genuine reading rather than a fault.
Fractional ratios matter for rendering because a one CSS pixel border cannot be drawn with a whole number of device pixels, so browsers round, and hairlines can look uneven. If a thin border looks inconsistent on one machine and clean on another, this is usually why.
What can a website learn about me from my device pixel ratio?
By itself, almost nothing. The overwhelming majority of visitors report 1, 2 or 3, so the value places you in one of three vast groups.
Fractional values are a different story. A ratio of 1.25 or 1.75 comes from a specific scaling choice on a specific machine, so it is markedly rarer than 2 and contributes real entropy to a fingerprint. It also implies Windows, since Apple platforms do not produce those values through normal settings.
The signal is most useful to a tracker when paired with the screen resolution, because together they reconstruct the physical panel: a reported 2560 by 1440 at a ratio of 1.5 says 4K monitor with 150 percent scaling, which is a much more specific machine than either number alone.
What you should know
Why sites collect it
Sites read DPR to serve the right image resolution (via srcset and similar), render sharp canvas and WebGL graphics, and lay out crisp interfaces on high-density screens. Getting it wrong makes images either blurry or needlessly heavy.
Privacy implications
DPR is a modest fingerprinting signal. Common values (1, 2, 3) are widely shared, but fractional ratios from OS display scaling (like 1.25 or 1.5) are more distinctive and, combined with resolution, help narrow your device.
How to change or hide it
Your DPR follows your display and your operating system scaling setting; changing the scaling changes the ratio and the size of everything on screen. Privacy browsers may report a rounded value to reduce distinctiveness.
Frequently asked questions
What does a device pixel ratio of 2 mean?
Two physical pixels are used for each CSS pixel, so the display is high-density and needs higher-resolution images to look sharp. Retina screens typically report 2 or 3.
Why is my DPR a fractional number like 1.5?
Operating system display scaling can produce fractional ratios. Setting your scale to 150 percent, for instance, yields a DPR of 1.5.
Does browser zoom change my device pixel ratio?
Yes. Page zoom multiplies into the reported value, so zooming to 110 percent on an ordinary monitor reports 1.1. Reset zoom to 100 percent for your true display ratio.
Do I need a 3x image for everyone?
No. A 3x image carries nine times the pixel data of a 1x version and looks identical on a ratio 1 screen. Offer 1x, 2x and 3x through srcset and let the browser pick.
Sources
Browser behaviour changes and vendors cap these values differently, so the claims above that are not self-evident are checked against the specifications and vendor documentation below.
Last checked on . How these values are measured and estimated is set out on the methodology page.
Something wrong here? Tell us what your browser reports and it gets corrected.