Demystifying Resolution: DPI, PPI, Device Pixel Ratio, and Crisp Image Exporting

Introduction: The Pervasive DPI Myth

"Please change this photo to 300 DPI so it looks crisp on mobile screens!" is a common misconception among novice designers and clients.

In pure digital display environments, a raw DPI metadata tag has zero impact on visual sharpness. Why is this? Why do standard graphics look sharp on older monitors but fuzzy on modern smartphone screens? This guide clarifies DPI, PPI, logical CSS units, and Device Pixel Ratio (DPR).

1. DPI vs. PPI: Clarifying Fundamental Concepts

1. DPI (Dots Per Inch):

* Context: Physical offset printing and inkjet printers.

* Definition: The number of physical ink droplets sprayed across one inch of paper. 300 DPI is the benchmark standard for high-end print brochures.

2. PPI (Pixels Per Inch):

* Context: Digital displays and smartphones.

* Definition: The density of physical glowing subpixel elements packed across an inch of screen panel. Standard monitors sit around 96 PPI, while modern smartphone panels reach 450+ PPI.

3. The Essential Takeaway:

* Screens only care about raw pixel dimensions (Width × Height in Pixels).

* A 1200 × 1200 pixel image renders identically on a web page whether its metadata header says 72 DPI or 300 DPI.

2. Retina Displays and Device Pixel Ratio (DPR)

If physical pixel dimensions are all that matters, why do some web graphics still look fuzzy on mobile devices?

#### Understanding DPR:

In standard displays, 1 CSS logical pixel corresponds directly to 1 physical screen pixel (DPR = 1).

High-density displays (like Apple Retina screens) feature physical pixel grids that are twice or three times denser:

* MacBook / iPad: Typically DPR = 2 (1 CSS pixel is rendered by 4 physical subpixels).

* Smartphones (iPhone Pro, Flagship Android): Typically DPR = 3 (1 CSS pixel is rendered by 9 physical subpixels).

#### The Cause of Blurriness:

If an element is styled at 400 × 300 CSS pixels and you serve a 400 × 300 pixel raster image, a DPR = 2 screen must stretch those 400 pixels across 800 physical LED emitters, producing noticeable interpolation blur!

3. Golden Rules for Crisp Digital Exports

When manipulating photos in WoollyPix tools (like Screenshot Beautifier or Long Stitch):

1. Adopt Supersampled Exports (2x / 3x):

* In Screenshot Beautifier, select 2x or 3x scale export. A 600px wide card rendered at 2x generates a true 1200px asset, remaining razor-sharp on Retina panels.

2. Standardize Long Stitch Resolutions:

* In Long Stitch, use scale mode to align all photos to the maximum clean source width, preventing ragged scaling artifacts.

3. Retain Vector Precision:

* Keep annotations and geometric shapes vector-based right until final rasterization to preserve sub-pixel anti-aliasing.

Summary

Mastering DPR and pixel density separates amateur visuals from professional production. By utilizing 2x/3x supersampled client-side exports, you ensure your images render with crisp perfection across any modern high-density screen.