Image DPI and PPI: The Complete Guide for Web and Print

DPI (Dots Per Inch) and PPI (Pixels Per Inch) are often confused. Understanding the difference is essential for print but largely irrelevant for web.

DPI: Dots Per Inch (Print)

DPI measures printer resolution. A 300 DPI printer places 300 dots in each linear inch. Higher DPI = sharper output. Print standard: 300 DPI for quality.

PPI: Pixels Per Inch (Screen)

PPI measures screen pixel density. iPhone 14: 460 PPI. MacBook Pro: 220 PPI. Standard monitor: 96 PPI. Higher PPI = sharper display (more pixels in less space).

Why DPI Matters for Print

At 300 DPI, an image must be 1500×1500 pixels to print at 5"×5". At 72 DPI, the same image prints at 20"×20" (and looks pixelated).

Why PPI Matters Less for Web

Browsers ignore DPI metadata. A 1000×1000 pixel image displays at 1000×1000 on a 96 PPI monitor, ~500×500 on a 192 PPI mobile. Web browsers scale automatically.

Retina and Display Scale

Retina screens (2x pixel density) require 2x resolution images for sharpness. Provide both 1x and 2x versions via srcset.

Image File Metadata

DPI is stored in image metadata. Browsers ignore it. Print software reads it. Always embed 300 DPI for print files, even though it does not affect file size or web appearance.

Practical Rule

For web: ignore DPI entirely. Image pixel dimensions are all that matter. For print: 300 DPI at final size, CMYK color space.

Checking Image DPI

Photoshop: Image > Image Size. ExifTool: exiftool image.jpg | grep XResolution. Online tools: drag-drop to inspect.

Converting DPI

DPI only affects interpretation, not pixel dimensions. An image is an image. "Converting" 72 DPI to 300 DPI in Photoshop without resampling does not add information.