How do you calculate PPI from resolution and screen size?

Use the Pythagorean theorem to find the diagonal pixel count: √(width_px² + height_px²), then divide that by the diagonal screen size in inches. For example, a 1920×1080 screen at 24 inches gives √(1920²+1080²)÷24 ≈ 91.8 PPI.

What PPI counts as a 'Retina' or high-DPI display?

There's no official universal threshold, but displays viewed at close range (like phones) generally need roughly 300+ PPI for individual pixels to be imperceptible to most people, while displays viewed farther away (like TVs and monitors) can appear sharp at much lower PPI due to the increased viewing distance.

Is PPI the same as DPI?

They're closely related but technically distinct: PPI (pixels per inch) describes a digital screen's pixel density, while DPI (dots per inch) traditionally refers to printer output resolution. The terms are often used interchangeably in casual conversation, but PPI is the more accurate term for screens.

Why does a 4K TV have lower PPI than a 4K monitor?

Both have the same resolution (3840×2160), so the same total pixel count, but a TV's much larger physical diagonal size spreads those pixels over a bigger area, resulting in lower pixel density. A 55-inch 4K TV has roughly 80 PPI, while a 27-inch 4K monitor has roughly 163 PPI.

How does PPI relate to devicePixelRatio in web development?

devicePixelRatio (DPR) is a browser-reported value indicating how many physical pixels correspond to one CSS pixel, factoring in both the display's PPI and any OS-level scaling applied. A high-PPI screen with 200% OS scaling might report DPR=2, even though its raw PPI is higher than a different screen also reporting DPR=2 with less scaling applied.

What resolution and screen size should I use to compare two monitors?

Use each monitor's native resolution and its advertised diagonal screen size (in inches) to calculate PPI for both, then compare the results directly — the monitor with the higher PPI will render text and images more sharply at the same viewing distance, all else being equal.

Screen Resolution

Web & Dev

Calculate PPI and screen density

Width (px)

Height (px)

Diagonal (inches)

PPI (pixels per inch) measures how densely packed the pixels are on a screen, and it's the number that actually determines how sharp text and images look — not the raw resolution alone. A 4K TV and a 4K phone screen have the same pixel count, but wildly different pixel densities, because PPI depends on both resolution and physical screen size. Developers building responsive layouts, comparing devices, or deciding when to serve high-DPI (2x/3x) image assets need this number, not just the raw width and height.

Our screen resolution calculator computes PPI directly from a display's resolution and diagonal screen size using the Pythagorean theorem: it finds the diagonal pixel count, then divides by the physical diagonal size in inches. Enter any resolution and screen size — a monitor, phone, tablet, or TV spec — and get the exact PPI instantly.

This is essential for choosing srcset breakpoints, understanding Apple's "Retina" display marketing claims, comparing devices before a purchase, or debugging why an image looks crisp on one screen and blurry on another.

Why Screen Resolution Matters

PPI directly determines when a display qualifies as "Retina" or high-DPI, which affects how developers should serve images. A screen with roughly 300+ PPI viewed at typical distance can't distinguish individual pixels, so serving a 2x or 3x resolution image (via srcset or the CSS image-set() function) is necessary to avoid a soft, blurry appearance on modern phones and laptops — while serving oversized images to a low-PPI desktop monitor wastes bandwidth without any visible sharpness benefit. Calculating a target device's actual PPI, rather than guessing from marketing terms, lets developers make evidence-based decisions about asset resolution tiers.

PPI calculations also matter for device comparison and purchasing decisions in web/UI design work: a designer choosing a reference monitor for pixel-accurate mockups needs to know its actual pixel density to understand how their 1x designs will map to real device pixels, and QA teams testing responsive layouts across a device lab need PPI figures to explain why the "same" CSS pixel value can look physically larger or smaller across different hardware. This is distinct from viewport width in CSS — PPI is a physical, hardware property, while CSS pixels are a logical abstraction that browsers scale independently.

The Screen Resolution Formula, Explained

PPI = √(width_px² + height_px²) ÷ diagonal_inches

Where: width_px and height_px are the screen's horizontal and vertical resolution in pixels, and diagonal_inches is the physical diagonal size of the screen (the number typically advertised, e.g., "6.1-inch" or "27-inch").

The formula first calculates the diagonal resolution in pixels using the Pythagorean theorem — treating width and height as the two legs of a right triangle, with the diagonal as the hypotenuse: diagonal_px = √(width_px² + height_px²). Dividing this diagonal pixel count by the physical diagonal size in inches gives pixels per inch, a measure of linear pixel density.

For example, a 1920×1080 monitor with a 24-inch diagonal: diagonal_px = √(1920² + 1080²) = √(3,686,400 + 1,166,400) = √4,852,800 ≈ 2202.5 pixels, and PPI = 2202.5 ÷ 24 ≈ 91.8 PPI. Higher PPI values indicate a sharper, denser display; smartphones typically range from 300–500+ PPI, while desktop monitors typically range from 90–220 PPI.

How to Use the Screen Resolution: Step by Step

Enter the resolution
Input the screen's horizontal and vertical resolution in pixels (e.g., 1920 × 1080), found in the device specs or display settings.
Enter the diagonal screen size
Input the physical diagonal measurement in inches — this is the number typically advertised (e.g., "27-inch monitor" or "6.1-inch phone").
Read the PPI result
The calculator returns the exact pixels-per-inch value, letting you compare it against common thresholds (roughly 300+ PPI is generally considered "Retina"/high-DPI on phones).
Use it for asset decisions
Apply the PPI figure to decide whether to serve 1x, 2x, or 3x image assets via srcset, or to compare device sharpness before a hardware purchase.

Screen Resolution Examples: Real-World Scenarios

Checking If a Phone Screen Qualifies as High-DPI

A developer wants to verify whether a phone with a 1170×2532 resolution and a 6.1-inch screen (comparable to an iPhone 14) qualifies as a high-density "Retina"-class display before deciding to serve 3x image assets.

Resolution:1170 × 2532px

Diagonal size:6.1 inches

Calculation

√(1170² + 2532²) ÷ 6.1 = √(1,368,900 + 6,411,024) ÷ 6.1 = √7,779,924 ÷ 6.1 ≈ 2789.3 ÷ 6.1

Result

PPI ≈ 457.3 — well above the ~300 PPI Retina threshold, confirming this display needs 3x-resolution image assets to render at full sharpness.

Comparing Two Monitors of the Same Resolution

A designer is choosing between a 24-inch and a 27-inch monitor, both at 1920×1080 resolution, and wants to understand how pixel density (and therefore sharpness) differs between them.

Resolution:1920 × 1080px

24-inch diagonal:24 inches

Calculation

√(1920² + 1080²) ÷ 24 = √4,852,800 ÷ 24 ≈ 2202.9 ÷ 24

Result

24-inch PPI ≈ 91.8. The same resolution on a 27-inch panel would only reach ≈ 81.6 PPI — confirming the smaller screen is visibly sharper at identical resolution, an important tradeoff when choosing a monitor for detail-oriented design work.

Evaluating a 4K Monitor's Pixel Density

A developer is deciding on OS-level display scaling for a new 27-inch 4K (3840×2160) monitor and wants to know its PPI to choose an appropriate scaling percentage.

Resolution:3840 × 2160px

Diagonal size:27 inches

Calculation

√(3840² + 2160²) ÷ 27 = √(14,745,600 + 4,665,600) ÷ 27 = √19,411,200 ÷ 27 ≈ 4405.8 ÷ 27

Result

PPI ≈ 163.2 — high enough that running at 100% scaling would make UI elements uncomfortably small; most users set this display to 150% scaling in their OS for a usable effective resolution.

Common Mistakes to Avoid

Confusing PPI (a physical hardware measurement) with CSS pixel density / devicePixelRatio (a logical, OS-and-browser-controlled scaling factor) — a high-PPI screen with OS scaling applied can report a lower devicePixelRatio than its raw PPI would suggest; use PPI for hardware comparisons and devicePixelRatio for web development asset decisions.
Using the advertised screen size without confirming it's the diagonal measurement — all standard display specs (phones, monitors, TVs) use diagonal size, but double-checking avoids applying the formula to the wrong dimension.
Assuming resolution alone indicates display quality — a 4K TV at 55 inches has a much lower PPI (about 80) than a 4K monitor at 27 inches (about 163), despite identical pixel counts, because PPI accounts for physical size, not just resolution.

Tips & Tricks

As a rough reference: smartphones typically target 300–500+ PPI (viewed close-up), laptops and desktop monitors typically target 90–220 PPI (viewed farther away), and the visual sharpness perceived also depends on viewing distance, not PPI alone.
When deciding on srcset breakpoints for responsive images, use PPI figures for your target device range to choose sensible 1x/2x/3x asset multipliers rather than guessing, since serving unnecessarily high-resolution images to low-PPI devices wastes bandwidth.

PPI is the number that actually determines display sharpness, and calculating it precisely — rather than relying on resolution or screen size alone — helps with responsive image strategy, device comparisons, and OS scaling decisions. Use this calculator alongside the Aspect Ratio calculator when planning how visual assets will render across your target device range.

Screen Resolution — Frequently Asked Questions

Related Calculators

Aspect Ratio Calculator

check the ratio behind your resolution

PX to REM Converter

convert CSS units for responsive layouts

File Size Calculator

estimate image file sizes at different resolutions

Bandwidth Calculator

estimate data usage for high-resolution assets

Download Time Calculator

estimate load times for high-DPI image assets

Authoritative References

MDN Web Docs — Responsive Images (srcset and sizes)

developer.mozilla.org — Authoritative guidance on serving resolution-appropriate images

W3C — CSS Values and Units Module (resolution unit)

w3.org — Official specification defining the CSS resolution unit (dppx/dpi)

External links open in a new tab. OmniCalc.us is not affiliated with these organisations.

Related Calculators

PX to REM

Web & Dev

Hex to RGB

Web & Dev

RGB to Hex

Web & Dev

Aspect Ratio

Web & Dev

Download Time

Web & Dev

File Size

Web & Dev