DPI and PPI get thrown around interchangeably in design conversations, and most of the time that's harmless — but they technically measure two different things, and knowing the difference explains why some of your conversion numbers don't quite match expectations.
PPI: Pixels Per Inch
PPI describes digital density — how many pixels are packed into one inch of a screen or a digital image. A higher PPI means more pixels in the same physical space, which is why a "Retina" or 4K display looks sharper than an older 1080p monitor of the same size: more pixels, same inch.
DPI: Dots Per Inch
DPI describes physical printing density — how many ink dots a printer lays down per inch of paper. It's a printer hardware spec, not a screen spec. A typical home printer might print at 300 DPI; professional print shops often go higher for fine detail.
DPI vs PPI at a Glance
| PPI | DPI | |
|---|---|---|
| Stands for | Pixels per inch | Dots per inch |
| Describes | Screens and digital images | Printers and printed output |
| Smallest element | A pixel, which can show any colour | An ink or toner dot, usually one of a few colours |
| Where you set it | Image metadata, export settings, display hardware | Printer driver and print quality settings |
| Typical values | 96 (CSS reference), roughly 100–220 (monitors), 300–500+ (phones) | 300–1200+ for home and office printers |
One subtle point: printer DPI and image PPI aren't one-to-one. A printer mixes several coloured ink dots to reproduce the colour of a single image pixel, so a printer rated at 1200 DPI doesn't need a 1200 PPI image. For most photo and document printing, around 300 PPI in the source image is the widely used target.
Why CSS Uses 96 as Its Default
When CSS defines 1 inch as 96px, that's really a PPI figure — it's saying "assume 96 pixels represent one inch of an old-standard monitor," which is where every px-to-cm, px-to-mm, and px-to-inch formula on this site gets its default base number from. It's a historical convention, not a measurement of any specific device.
From that single number, every CSS physical unit follows: 1in = 96px, 1cm = 37.795px, 1mm = 3.7795px, and 1pt (1/72 inch) = 1.3333px. Those values never change in the browser, whatever screen you're on.
Device Pixels vs CSS Pixels
Modern screens have far more than 96 physical pixels per inch, so browsers separate two ideas. CSS pixels are the units you write in your stylesheet. Device pixels are the actual dots of light on the panel. The ratio between them is the device pixel ratio (DPR), which JavaScript exposes as window.devicePixelRatio.
On a phone with a DPR of 3, a width: 100px box is drawn with 300 device pixels across. Your layout doesn't change, but text and vector graphics look much sharper because there's more detail to work with. This is why the CSS pixel is often called a "reference pixel": it's an abstract unit sized to look roughly the same at a normal viewing distance, not a physical dot.
The DPR matters most for raster images. A 400px-wide photo displayed at width: 400px on a DPR-2 screen is stretched across 800 device pixels and looks soft. The fix is to provide higher-resolution versions and let the browser choose:
<img src="photo-400.jpg"
srcset="photo-400.jpg 1x, photo-800.jpg 2x, photo-1200.jpg 3x"
width="400" height="300" alt="Product photo">In CSS you can target high-density screens with a resolution media query, which uses the dppx unit (dots per CSS pixel):
@media (min-resolution: 2dppx) {
.logo { background-image: url("logo@2x.png"); }
}CSS also accepts dpi in that query, where 1dppx equals 96dpi — another appearance of the same 96 reference.
Why the Terms Get Mixed Up
"DPI" became the popular term first, back when digital images were mostly discussed in the context of eventual printing, so people kept calling screen density "DPI" out of habit even after PPI became the more accurate term for on-screen pixel density. Most software — including this site's converters — lets you type in a custom "DPI" value even though, strictly speaking, a pixel conversion is a PPI calculation.
Does the Distinction Actually Matter Day to Day?
For most web work, no — you can use the default 96 and move on. It starts to matter when you're preparing an image for print at a specific physical size, working with a high-density display and need exact physical dimensions, or troubleshooting why an exported image looks blurry (usually a PPI mismatch between what was designed and what's being displayed).
Worked Example: How Big Can This Image Print?
The formula is the same one used for any pixel-to-inch conversion: Inches = Pixels ÷ PPI. Take a 3000 × 2000 pixel photo:
- At 300 PPI: 3000 ÷ 300 = 10in by 2000 ÷ 300 = 6.67in — a sharp 10 × 6.67in print.
- At 150 PPI: 20in by 13.33in — larger, but softer up close. Often fine for posters viewed from a distance.
- At 96 PPI (CSS): 31.25in by 20.83in — the size a browser would treat it as if displayed at its natural pixel size and printed.
Working backwards, if a print shop wants a 4 × 6in photo at 300 PPI, you need at least 1200 × 1800 pixels. Changing an image's PPI metadata in an editor without resampling doesn't add any detail; it only changes the printed size the file suggests. For page-layout examples, see Converting PX to Inches for Print-Ready Design.
Common Misconceptions
- "Web images must be saved at 72 DPI." Browsers ignore the PPI value stored in an image file. Only the pixel dimensions matter on screen; a 1200px image displays identically whether its metadata says 72 or 300.
- "Higher DPI on a printer means I need a higher-PPI image." Past about 300 PPI, extra image resolution rarely produces visible improvement in typical prints.
- "A CSS inch is a real inch on my screen." Only on paper. On screen, OS scaling and the device pixel ratio decide the physical size.
- "Mouse DPI is the same thing." Mouse DPI (more accurately CPI, counts per inch) measures sensor sensitivity and has nothing to do with images or CSS.
Frequently Asked Questions
Is 72 DPI or 96 DPI the standard for screens?
Neither describes modern screens. 72 comes from early Macintosh displays and still appears as a default in some image editors; 96 is the reference CSS uses to define the inch. Real displays are usually much denser.
How do I find my screen's PPI?
Divide the diagonal resolution in pixels by the diagonal size in inches. For a 27-inch 2560 × 1440 monitor: √(2560² + 1440²) ≈ 2937 pixels, and 2937 ÷ 27 ≈ 109 PPI.
Does DPI affect px to cm or mm conversions?
In CSS, no — the browser always uses 96px per inch, so 1cm is 37.795px. A different DPI value is only useful when you're converting for another context, such as preparing an image for print at a known resolution.
What does dppx mean?
Dots per CSS pixel. It's the CSS name for the device pixel ratio, used in resolution media queries. A screen with 2dppx draws each CSS pixel with a 2 × 2 grid of device pixels.
Try it yourself: our CSS unit converters all accept a custom base value, so you're not stuck with the 96 default. Try converting the same width at 96 and 300 in the PX to Inch or PX to CM converter to see the difference between screen and print sizing.