Screen resolution sounds like a single number — 1920×1080, '4K', 'Retina' — but it is really the interaction of several: the pixel dimensions, the physical size, the resulting pixel density, and the device pixel ratio that modern high-density displays use to render sharply. Confusing these is why a '4K' phone and a '4K' TV are wildly different things, and why an image that looks crisp on one screen looks soft on another. This tool clarifies the relationships, detects your current display's properties, and helps you reason about resolution the way it actually behaves rather than the way marketing describes it.
How the tool works
The tool reports your current screen's resolution and device pixel ratio, and lets you explore how pixel dimensions, physical size, and density relate. It shows the difference between the CSS resolution a web page sees and the physical pixels a high-density display actually uses to render it — the distinction that explains why designing for modern screens requires thinking in two coordinate systems at once. Everything reads from your own browser and device.
The numbers that define a display
Resolution pixel dimensions, e.g. 1920×1080
PPI pixels per inch = density = sharpness
PPI = √(width² + height²) ÷ diagonal inches
Device pixel ratio (DPR):
1× standard 2× 'Retina'/HiDPI 3× some phones
CSS pixels × DPR = physical pixels renderedPixel density, not raw resolution, is what determines sharpness — and it is why the same resolution looks different on different screens. A 1920×1080 image spread across a 27-inch monitor has far lower density than the same resolution on a 5-inch phone, so the phone looks sharper despite identical pixel counts. This is also the whole reason for the device pixel ratio: a '2×' display packs two physical pixels into each CSS pixel, so a web page written for 400 pixels is actually rendered with 800, which is why images must be exported at 2× to stay crisp on those screens.
What to know about screen resolution
- 1Density, not resolution, determines how sharp a screen looks. The same 1920×1080 is crisp on a phone and merely adequate on a large monitor, because density — pixels packed per inch — is what the eye actually perceives as sharpness. When comparing displays, pixels-per-inch tells you more about apparent quality than the headline resolution number does.
- 2Design and export images for high-density screens at 2×. A 'Retina' or HiDPI display renders each CSS pixel with two physical pixels, so an image meant to display at 400 pixels needs to be 800 pixels to stay sharp. Exporting web images at 1× leaves them soft on the majority of modern phones and many laptops — 2× is the practical baseline now.
- 3'4K' means different things on different devices. The label refers to roughly 3840 horizontal pixels, but that resolution on a phone, a laptop, and a 65-inch TV produces completely different densities and viewing experiences. '4K' is a pixel count, not a quality guarantee; how it looks depends entirely on the screen size and how far away you sit.
- 4CSS pixels and physical pixels are two different coordinate systems. A web page is laid out in CSS pixels, which a high-density screen then multiplies by its device pixel ratio into physical pixels. Understanding that a page 'sees' 400 pixels while the screen draws 800 is the key to why responsive design and image resolution work the way they do.
- 5Viewing distance changes how much resolution you can actually use. A phone held close needs high density to look sharp, but a TV across the room does not — past a certain distance, the eye cannot resolve the extra pixels, so a higher resolution adds nothing visible. This is why 8K TVs show little benefit at normal living-room distances: the density exceeds what the eye can perceive from the couch.
Frequently asked questions
What is the difference between resolution and pixel density?
Resolution is the raw pixel count — 1920×1080, for instance — while pixel density (PPI, pixels per inch) is how tightly those pixels are packed into the physical screen. Density is what the eye perceives as sharpness. The same resolution looks crisp on a small phone and soft on a large monitor because the phone packs the pixels far more densely. When judging image quality, density matters more than the resolution number alone.
What is device pixel ratio and why does it matter?
Device pixel ratio (DPR) is how many physical pixels a display uses to render each CSS pixel. A standard screen is 1×; a 'Retina' or HiDPI screen is 2×, meaning it draws a 400-pixel web element with 800 physical pixels. It matters because images must be exported at that ratio to stay sharp — a 1× image looks soft on a 2× screen. Modern phones and laptops are mostly 2× or higher, so designing for high DPR is now the default.
Why does the same image look sharp on my phone but soft on my monitor?
Because of pixel density. Your phone packs its pixels into a small screen at high density, so images look crisp, while your monitor spreads a similar pixel count across a much larger area at lower density, making the same image look softer. The image has not changed — the display's density has. To look sharp on a high-density screen, an image needs enough pixels to match that density, which usually means exporting at 2×.
Does a higher resolution always look better?
Not necessarily — it depends on screen size and viewing distance. A higher resolution only helps if the display is dense enough and you are close enough to resolve the extra pixels. On a phone held close, high resolution matters a lot; on a TV across a room, past a certain point the eye cannot see the additional detail, so 8K shows little benefit at normal distances. Resolution is only useful up to the limit of what your eye can perceive at your viewing distance.
What resolution should I design or export images for?
Export at 2× the intended display size as the practical baseline, since most modern phones and many laptops are high-density screens that render each CSS pixel with two physical pixels. An image meant to show at 400 pixels should be 800 pixels to stay crisp on those displays. For screens known to be 3×, some designers go higher, but 2× covers the majority. Below that, images look soft on the high-density screens that now dominate.