When sending digital banner files to your client or setting up assets for a web prototype, you will often find various warnings like *"This must be set to 72 DPI!"* or *"Print requires 300 DPI."* Let's clarify these confusing abbreviations:

1. PPI (Pixels Per Inch)

PPI is a physical measurement specifying digital pixels displayed per inch of a physical monitor.

  • Where It Lives: Your screen! Modern phones and Macs have very high PPI (Retina displays), packing hundreds of tiny sub-pixels per physical inch.
  • Rule of Thumb: PPI controls how sharp individual pixels look on a physical screen panel.

2. DPI (Dots Per Inch)

DPI is an industry measurement used specifically in hardware page printing and laser dot layouts.

  • Where It Lives: Industrial commercial printers and physical paper scanners.
  • Rule of Thumb: It tells a physical printer head how many separate micro-dots of physical cyan, magenta, yellow, and black ink to spray onto one inch of paper.

The Big Secret for Web Developers

Screens do not care about your image file's DPI meta-header. A header indicating "300 DPI" inside a JPG file does absolutely nothing when displayed on Chrome or Safari. The browser only cares about the raw pixel dimension (e.g., $1920 \times 1080$). If you have a $600 \times 600$ pixel image, it will render at exactly the same physical viewport size on Google Chrome whether the EXIF tag says "72 DPI" or "999 DPI." Save valuable kilobytes in your asset directories by removing non-essential EXIF resolution metrics!