DPI vs PPI vs pixel density: a working guide for designers

Three numbers, three meanings:

• DPI (dots per inch) — how many ink dots a printer places per linear inch. A hardware property of the printer.
• PPI (pixels per inch) — how many image pixels print or display per linear inch at the target size. A property of how the image is rendered.
• Pixel density — the device pixels per CSS pixel on a display. A property of the screen (Retina, 4K, etc.).

Almost every design tool labels its “resolution” field as DPI when it actually means PPI. The misuse is so ingrained that the rule of thumb is: when a designer says DPI, assume they mean PPI unless they’re literally talking about a physical printer’s rated output.

What each number actually tells you

DPI (printer or scanner)

Modern inkjets run 1200-4800 DPI. Laser printers run 600-2400 DPI. Both numbers describe how finely the hardware can place ink dots, not how much image detail a page can hold. A 4800 DPI printer can’t print a 4800 PPI image — typical effective image resolution (PPI) tops out around 300-400 even on the best inkjets, because rendering one image pixel requires multiple ink dots (halftone screening).

PPI (the image-meets-target-size number)

PPI describes an image only when you specify a target physical size. A 3000×2000-pixel image printed at 10×6.67 inches is 300 PPI. Printed at 5×3.33 inches it’s 600 PPI. Printed at 20×13.33 inches it’s 150 PPI. Same file, three different PPI values.

Standard rules for what PPI you need:

• 72-96 PPI — web display. Browsers ignore the embedded PPI; only pixel count matters.
• 150 PPI — newspaper print, large-format poster viewed from distance.
• 300 PPI — book, magazine, photo print viewed at arm’s length.
• 600+ PPI — line art, technical drawings, fine typography.

Pixel density (the Retina number)

On modern screens, “1 pixel” in CSS isn’t one screen pixel. iPhones, MacBook Pros, and most modern Android phones use a devicePixelRatio of 2 or 3 — meaning one CSS pixel maps to 2× or 3× the physical pixels. This is why a designer working in Figma at 1× produces images that look soft on a phone unless they export at 2× or 3× resolution.

Concrete numbers: a 2020 iPhone has a CSS-pixel resolution of 390×844 but a physical resolution of 1170×2532 (3× DPR). Designers need to know both. The DPI of the physical screen is a separate number again (~460 PPI for that phone), but in CSS terms what matters is the device pixel ratio.

Practical numbers for common deliverables

Where the confusion bites

1. The “72 DPI” export problem

A designer builds in Figma/Sketch at “72 DPI” (which is meaningless on screen but is what the tool displays), exports a PDF, and sends it to a press. The press receives a file that asserts 72 PPI in its metadata; the rendered output is 1/4 the intended density, and the print looks pixelated. Fix: re-export at 300 PPI andensure the pixel count is enough to support that density.

2. Retina @1× exports

A designer working in Figma at 1× exports an icon at exactly the CSS dimensions (e.g. 24×24 px). On a 3× device the icon renders blurry because the browser’s upscale isn’t as sharp as a native 72×72 export. Fix: export @1× plus @2× and @3× variants, then use HTML srcset orimage-set in CSS to serve the right file.

3. Confusing source PPI with target PPI

A photographer shoots a 6000×4000 raw image. The camera embeds 300 PPI metadata. The photographer drops this into a 600×400 web layout. The image is 10× more pixel data than the layout needs; the source PPI metadata is irrelevant. Fix: downsize to the target pixel dimensions (or 2× them for Retina) using a real downsampling algorithm — our image resize tool handles this.

Quick reference: when each number matters

• Web work: only pixel count + DPR matter. Ignore embedded PPI metadata.
• Print work: PPI matters absolutely. Match it to the print’s viewing distance (300 PPI for hand-held, 150 PPI for hung-on-wall, lower for distant).
• Photography archive: keep the original full-resolution source. Generate downscaled variants for each downstream use.
• UI design: design at 1× CSS dimensions, export at 2× and 3×.

For the deeper one-page comparison, see our DPI vs PPI comparison. For the colour-conversion side of design, the colour methodology page covers RGB vs CMYK and ICC profiles.

Worked example: exporting an icon for three platforms

A 24×24 CSS-pixel toolbar icon needs to look sharp on a desktop browser, an iPhone 15 Pro (3× DPR), and a print press at 300 PPI.

• Desktop @1×: export 24 × 24 PNG. File size ~1.2 KB.
• Retina @2×: export 48 × 48 PNG, served via image-set or srcset with the 2x descriptor. File size ~2.8 KB.
• iPhone @3×: export 72 × 72 PNG, served with 3x. File size ~4.5 KB.
• Print at 300 PPI, printed at 0.5 inches:export 150 × 150 PNG (or, better, an SVG so the press rasteriser handles the resolution).
• Better answer for everything:ship the SVG source. Vector primitives don’t care about DPR or PPI; the renderer rasterises at the target resolution on demand. Reserve PNG/JPG for raster content (photos, gradient illustrations) only.

Common mistakes

• Changing the PPI field in Photoshop instead of resampling.Photoshop’s “Image Size” dialog has a “Resample” checkbox. Toggling PPI without resampling changes only the print-size metadata; the pixel count and visible quality are unchanged. With resampling on, you actually add or remove pixels.
• Designing in Figma at 2× by default.Figma uses 1 unit = 1 CSS pixel. If you design at 2× dimensions, your exported @1× will be twice the intended size and your @2× will be 4×. Design at 1×; let export handle the multipliers.
• Mixing print and web in the same file.A 300 PPI print PDF embeds rasters sized for print; a web export from the same source is wildly oversized for the web. Keep separate web and print masters, both derived from the original.
• Forgetting bleed and trim on print.A business card at 3.5" × 2.0" needs 3.625" × 2.125" (0.125" bleed). At 300 PPI that’s 1087 × 637 pixels, not 1050 × 600.
• Treating “web” as one resolution.Modern viewports range from 320 CSS px (small phones) to 3840 CSS px (4K monitors), with DPR from 1 to 4. Generate at least three raster sizes per asset and let the browser pick.

Edge cases

• Foldable phones. Some Samsung Galaxy Fold devices report DPR 2.625 — a fractional ratio. Browsers rasterise via the nearest srcset descriptor; ship 1×/2×/3× and let it choose.
• Browser zoom. A user zoomed to 200% effectively doubles their DPR. Vector assets handle this gracefully; rasters get upscaled by the browser. Provide enough resolution that browser upscaling has headroom.
• Print at home vs print at press. Inkjets at home are nominally 1200-4800 DPI but only deliver ~200 PPI of effective image detail. Commercial presses deliver true 300 PPI. Match your source to the destination press, not the home printer.
• E-paper devices. Kindle Paperwhite, reMarkable, and similar use Carta e-ink at ~300 PPI but read very differently from LCD. Image contrast curves matter more than PPI here; flat designs win.

Sources: Adobe’s Print Production Reference (2023); W3C HTML Living Standard (image source set); Apple Human Interface Guidelines on Layout; W3C CSS Values and Units Module Level 4 (resolution units).