What is device pixel ratio (DPR)?

Device pixel ratio is the ratio of physical device pixels to CSS pixels on a screen. A DPR of 2 means the display packs a 2x2 block of physical pixels into the space of one CSS pixel — the browser reports this via window.devicePixelRatio, and it's the basis for serving sharp images on Retina and other HiDPI displays.

Why does my DPR change when I zoom my browser?

Browser zoom changes the effective mapping between physical pixels and CSS pixels, which is exactly what devicePixelRatio measures. Zooming in increases the reported ratio; zooming back to 100% returns it to your display's baseline value. OS-level display scaling has the same effect.

What DPR do Retina displays report?

Most Apple Retina displays report a DPR of 2, meaning each CSS pixel is rendered using a 2x2 grid of physical pixels. Some newer iPhone models report 3. Non-Apple HiDPI monitors commonly report 2 as well, though Windows laptops with fractional OS scaling (125%, 150%) can report values like 1.25 or 1.5.

How do I use DPR to export image assets at the right size?

Multiply your CSS display width by each target ratio: a 100px-wide icon needs a 100px export for 1x displays, 200px for 2x (Retina), and 300px for 3x. Name them with the standard @2x/@3x suffix convention, or serve them via an HTML srcset attribute so the browser picks the right one automatically based on the viewer's actual DPR.

Does a higher device pixel ratio mean a sharper screen?

Generally yes, in the sense that more physical pixels are being used to render the same CSS-pixel content, so fine detail and text edges look crisper. But DPR alone doesn't capture panel quality — pixel density (PPI) and viewing distance both affect how much of that extra sharpness is actually visible to your eyes.

Why do some images look blurry on my Retina display even though the site loads fine?

If a site only ships a 1x version of an image, a 2x or 3x display has to upscale it to fill the same CSS-pixel space, and that upscaling is what produces the blur. The fix is on the site's side — serving 2x/3x versions via srcset or @2x/@3x-named files — not something a viewer can correct locally.

Pixel Ratio Checker

The Pixel Ratio Checker reads your browser's live device pixel ratio and classifies it into a display class — 1x standard, 1.5x, 2x Retina/HiDPI, or 3x — so you know how many physical pixels back every CSS pixel on your screen. Enter an element width and the tool works out the matching 1x/2x/3x asset export size, the exact numbers a designer needs when shipping images for a HiDPI screen. The color gamut checker online gives you a clear, actionable result instantly, with no sign-up required.

Your Device Pixel Ratio

--Pixel Ratio

--Display Class

Element Width (CSS px)

Browser zoom and OS display scaling both move this number the same way — there’s no way to tell them apart from JavaScript alone.

Device pixel ratio (DPR) is the ratio between physical device pixels and CSS pixels on your screen. A DPR of 1 means one physical pixel maps to one CSS pixel; a DPR of 2 — typical of Retina and most HiDPI displays — means the screen packs four physical pixels (2×2) into the space of a single CSS pixel, which is why the same layout looks identical in size across a 1x and a 2x display but noticeably sharper on the 2x one.

Why Device Pixel Ratio Isn't the Same as Screen Resolution

Screen resolution describes the physical pixel grid a display has — say, 3840×2160. Device pixel ratio describes how the operating system maps that physical grid onto the CSS pixel grid that web pages and apps actually lay out content against. The same physical resolution can report different DPR values depending on the OS scaling setting: a 3840×2160 panel running at 100% OS scale reports a lower DPR than the same panel running at 200% scale, even though the physical pixel count hasn't changed. This is exactly why browser zoom and OS-level display scaling both change the value this page reports — DPR reflects the current effective mapping, not a fixed hardware spec. The monitor count detector gives you a clear, actionable result instantly, with no sign-up required.

Reading the Display Class

This page classifies window.devicePixelRatio into rough bands: 1x (Standard) for conventional non-HiDPI displays, 1.5x for the fractional scaling common on some Windows laptops, 2x (Retina / HiDPI) for the ratio Apple's Retina displays and most modern HiDPI monitors report, and 3x+ (Ultra HiDPI) for the higher ratios seen on many high-end phones. There's no hard technical boundary between these bands — they're a convenience for eyeballing where your display sits, not an official standard. A quick pass through the free tailwind breakpoint checker catches issues before they become real problems.

Using the Export-Size Calculator

Enter the CSS width you're designing an image or icon for, and the calculator shows the pixel dimensions you'd need to export at 1x, 2x, and 3x so the asset stays sharp at each density — plus the exact pixel width for your own display's current ratio. This is the same math behind naming conventions like icon.png / [email protected] / [email protected]: browsers pick the highest-density asset available up to the display's actual DPR and scale it back down to the CSS size, so shipping only a 1x asset means it gets upscaled and looks soft on any 2x or 3x display, while shipping the right multiple keeps every pixel doing real work.

A common mistake is exporting assets sized for your own development display's DPR and assuming that covers everyone — if you design on a 2x Retina laptop and only ever export 2x assets, users on 3x phones still get an upscaled, slightly soft image. Exporting the full 1x/2x/3x set (or serving via srcset) covers the actual spread of devices your visitors use, rather than just the one on your desk.

Frequently Asked Questions

What is device pixel ratio (DPR)?: Device pixel ratio is the ratio of physical device pixels to CSS pixels on a screen. A DPR of 2 means the display packs a 2x2 block of physical pixels into the space of one CSS pixel — the browser reports this via window.devicePixelRatio, and it's the basis for serving sharp images on Retina and other HiDPI displays.
Why does my DPR change when I zoom my browser?: Browser zoom changes the effective mapping between physical pixels and CSS pixels, which is exactly what devicePixelRatio measures. Zooming in increases the reported ratio; zooming back to 100% returns it to your display's baseline value. OS-level display scaling has the same effect.
What DPR do Retina displays report?: Most Apple Retina displays report a DPR of 2, meaning each CSS pixel is rendered using a 2x2 grid of physical pixels. Some newer iPhone models report 3. Non-Apple HiDPI monitors commonly report 2 as well, though Windows laptops with fractional OS scaling (125%, 150%) can report values like 1.25 or 1.5.
How do I use DPR to export image assets at the right size?: Multiply your CSS display width by each target ratio: a 100px-wide icon needs a 100px export for 1x displays, 200px for 2x (Retina), and 300px for 3x. Name them with the standard @2x/@3x suffix convention, or serve them via an HTML srcset attribute so the browser picks the right one automatically based on the viewer's actual DPR.
Does a higher device pixel ratio mean a sharper screen?: Generally yes, in the sense that more physical pixels are being used to render the same CSS-pixel content, so fine detail and text edges look crisper. But DPR alone doesn't capture panel quality — pixel density (PPI) and viewing distance both affect how much of that extra sharpness is actually visible to your eyes.
Why do some images look blurry on my Retina display even though the site loads fine?: If a site only ships a 1x version of an image, a 2x or 3x display has to upscale it to fill the same CSS-pixel space, and that upscaling is what produces the blur. The fix is on the site's side — serving 2x/3x versions via srcset or @2x/@3x-named files — not something a viewer can correct locally.