Image DPI and Resolution Explained — Print vs Web vs Screen

DPI vs PPI — what's the difference?

DPI (Dots Per Inch) is technically a printing term. It refers to how many individual ink dots a printer places within one inch of physical print. A 300 DPI print has 300 tiny ink dots per inch — enough that they blur together and look smooth to the human eye at normal reading distance.

PPI (Pixels Per Inch) is the screen equivalent — how many pixels fit in one inch of a screen. A 1080p monitor at 24 inches has about 92 PPI. An iPhone 15 display has 460 PPI.

In everyday conversation, people use DPI and PPI interchangeably. Technically they're different, but the distinction rarely matters for practical purposes.

The big misconception about 72 DPI for web

You have probably heard "72 DPI for web, 300 DPI for print." The web part is a myth that refuses to die.

DPI metadata in an image file has absolutely no effect on how an image appears on screen. Screens don't read the DPI value — they display the image based on pixel count alone. An 800×600 pixel image at 72 DPI and an 800×600 pixel image at 300 DPI look exactly identical on your monitor. Same pixels, same display.

The 72 DPI convention dates back to the original Macintosh (1984), which had a 72 PPI screen specifically designed so that a one-inch element on screen would print as one inch on paper. Modern monitors have nothing to do with this.

What matters for web images is pixel count, not DPI.

What resolution do I actually need?

For websites and apps

Think in pixels, not DPI. Target:

• Hero / full-width banners: 1920px wide (enough for desktop), with a 2× version (3840px) for Retina screens if performance allows
• Blog post images: 1200–1600px wide
• Product thumbnails: 600–800px
• Avatars / icons: 200–400px

Retina (HiDPI) displays show images at 2× pixel density. A 400px image displayed at 400px CSS width on a Retina screen will look blurry because the screen wants 800 actual pixels to fill that space. This is why many sites serve 2× images via srcset.

For print

Here DPI actually matters. Standard print quality:

• 300 DPI — professional print quality (books, magazines, business cards, photos). Looks sharp at normal reading distance.
• 150 DPI — acceptable for large format materials viewed from further away (posters, banners)
• 72 DPI — only for very large displays viewed from several metres away (billboard, exhibition prints)

To work out the pixel count needed for a print, multiply: width (inches) × DPI = pixels needed

Example: A 4×6 inch photo at 300 DPI needs 1200 × 1800 pixels. An 8×10 inch print at 300 DPI needs 2400 × 3000 pixels.

Print size guide (at 300 DPI):
─────────────────────────────────────────
Wallet (2.5 × 3.5 in)  →  750 × 1050 px
4 × 6 in               →  1200 × 1800 px
5 × 7 in               →  1500 × 2100 px
8 × 10 in              →  2400 × 3000 px
A4 (8.3 × 11.7 in)     →  2490 × 3510 px
11 × 14 in             →  3300 × 4200 px
16 × 20 in             →  4800 × 6000 px

Can I increase DPI without losing quality?

No. You cannot add real detail that isn't there. If you take a 500×500 pixel image and "upscale" it to 2000×2000 pixels in Photoshop, you have more pixels but the same amount of actual information — the software is guessing at the missing data. The result is blurry or softened.

AI upscaling tools (Topaz Gigapixel, Stability AI, etc.) do a much better job than traditional bicubic interpolation, but they are still generating estimated data. They can recover some apparent sharpness from compressed originals, but they are not recovering lost detail.

The only real fix is to shoot or export at the resolution you need from the start.

Quick reference

References: Adobe — DPI explained · MDN — CSS resolution units