DPI and PPI are the most misused terms in digital imaging. Designers say "make it 300dpi" when they mean "make it enough pixels for 300dpi at print size." Web developers say "72dpi for web" when DPI has zero effect on screen display. Clients ask for "high-resolution" without specifying whether they mean print or screen, pixel count or pixel density.
This guide untangles the confusion with clear definitions, actual math, and practical rules for every output scenario.
PPI and DPI: Two Different Things
These terms describe different stages of the imaging pipeline and are not interchangeable, despite decades of misuse.
PPI: Pixels Per Inch (Digital)
Definition: The number of pixels that fit in one linear inch when an image is output at a specific physical size. PPI is a relationship between pixel count and output dimensions, not an intrinsic property of the image file.
The key insight: A 3000x2000 pixel image doesn't have a PPI until you decide how large to print or display it. At 10"x6.67", it's 300ppi. At 20"x13.33", it's 150ppi. At 41.67"x27.78", it's 72ppi. Same pixels, different physical output, different PPI.
The metadata field: Image files (JPEG, TIFF, PNG, PSD) have a DPI/PPI metadata field. This field is just a number stored in the file header — it suggests a default print size but doesn't change the actual pixel data. Changing a 72ppi image to 300ppi in the metadata (without resampling) doesn't add any pixels or improve quality. It just changes the default print size calculation.
DPI: Dots Per Inch (Print)
Definition: The number of ink dots a printer places in one linear inch. This is a property of the printer hardware, not the image file. A typical inkjet printer operates at 720, 1440, or 2880dpi. A commercial offset press operates at 150–175 LPI (lines per inch), which translates to effectively 300–350dpi of image resolution needed.
DPI vs PPI in printing: The printer's DPI and the image's PPI are different numbers. An inkjet printer at 1440dpi uses multiple tiny ink dots to reproduce a single pixel. An image at 300ppi sent to a 1440dpi printer means each pixel is represented by roughly 4.8 x 4.8 ink dots (1440/300 = 4.8). Those multiple dots allow dithering patterns that simulate smooth tonal gradients with binary ink (each dot is either ink or no ink).
The Resolution Math
Three variables are in play: pixel dimensions, physical output size, and pixel density (PPI). Knowing any two determines the third.
The Three Formulas
Find PPI: PPI = Pixel dimension ÷ Physical size (inches)
Example: 3000px image, 10" print width → 3000 ÷ 10 = 300ppi
Find required pixels: Pixels = Physical size (inches) × PPI
Example: 8" print width at 300ppi → 8 × 300 = 2400px needed
Find maximum print size: Print size (inches) = Pixel dimension ÷ PPI
Example: 4000px image at 300ppi → 4000 ÷ 300 = 13.33" maximum print width at full quality
Real-World Calculations
| Output | Physical Size | Required PPI | Pixels Needed (W x H) |
|---|---|---|---|
| Business card | 3.5" x 2" | 300 | 1050 x 600 (+ bleed) |
| A4 brochure | 8.27" x 11.69" | 300 | 2481 x 3507 |
| Magazine cover | 8.5" x 11" | 300 | 2550 x 3300 |
| Large poster (24x36") | 24" x 36" | 150-300 | 3600 x 5400 (min) |
| Billboard (14x48 ft) | 168" x 576" | 15-30 | 2520 x 8640 (min) |
| Photo print 4x6" | 4" x 6" | 300 | 1200 x 1800 |
| Photo print 8x10" | 8" x 10" | 300 | 2400 x 3000 |
| Canvas wrap 16x20" | 16" x 20" | 150-200 | 2400 x 3000 (min) |
Add bleed (typically 0.125" or 3mm per side) for print pieces that go to a trimming cutter. A 3.5" business card with bleed is 3.75" → 3.75 x 300 = 1125px.
Screen Resolution: Why DPI Doesn't Apply
On screens, the DPI/PPI metadata in an image file has zero effect on display. This is the single most important fact about digital resolution, and the most frequently misunderstood.
How Screens Actually Display Images
A web browser (or any screen-rendering application) ignores the image's DPI metadata entirely. It uses the image's pixel dimensions and the CSS/layout constraints to determine display size.
A 1920x1080 image with DPI metadata set to 72 and the same image with DPI set to 300 display at exactly the same size on screen. The metadata changes nothing about the pixel data or how the browser renders it.
What determines on-screen size:
- CSS dimensions:
width: 600pxforces any image to 600 CSS pixels wide, regardless of the image's native dimensions or DPI. - Native dimensions: Without CSS constraints, the image displays at its intrinsic pixel dimensions (1 image pixel = 1 CSS pixel on a 1x display).
- Device pixel ratio: On a 2x Retina display, the browser uses 2 physical pixels per CSS pixel. A 1200px wide image in a 600px CSS container looks sharp because it has 2x the physical pixels needed.
The 72dpi Myth
"Save images at 72dpi for web" is advice from the early 1990s that refuses to die. Here's why it's wrong and where it came from.
Origin: The original Macintosh (1984) had a 72ppi display. One point in the Mac's typography system equaled one pixel. Photoshop defaulted to 72ppi for "screen resolution" images to match this 1:1 relationship. Designers were told "72dpi for web, 300dpi for print" as a rule of thumb.
Why it's meaningless now: Modern screens range from ~100ppi (budget desktop monitors) to 460+ppi (phones). There is no single "screen resolution." The DPI metadata field has no effect on web display. Setting an image to 72dpi vs 300dpi changes only the metadata, not the pixel data, and browsers ignore the metadata. What matters is pixel count — a 1920px wide image is a 1920px wide image regardless of its DPI metadata.
The only thing DPI metadata affects: The default print size when you open the image in Photoshop or send it to a printer without specifying dimensions. A 3000px image at 72dpi shows a default print size of 41.67" wide. The same image at 300dpi shows 10" wide. The pixels haven't changed; only the default print size calculation has.
Retina and HiDPI Displays
Device pixel ratio (DPR): Modern screens pack more physical pixels per CSS pixel. A 2x Retina display has 2 physical pixels per CSS pixel in each direction (4 physical pixels per CSS pixel total). A 3x display has 9 physical pixels per CSS pixel.
Practical impact: A 400px CSS-width image container on a 2x display needs an 800px image for pixel-perfect sharpness. On a 3x display, it needs 1200px. If you provide a 400px image, it gets upscaled by the browser and looks blurry on Retina.
Solution: srcset. Use the HTML srcset attribute to provide multiple resolutions:
<img src="photo-400.webp" srcset="photo-800.webp 2x, photo-1200.webp 3x" width="400">The browser automatically downloads the appropriate size for the viewer's display. This serves smaller files to 1x displays and crisp images to Retina without wasting bandwidth.
Resampling vs Resizing: Not the Same
This distinction trips up even experienced users because Photoshop's Image Size dialog handles both operations, and the checkbox that controls which one happens is easy to miss.
Resizing (No Resampling): Changing Output Size Only
Resizing changes the DPI metadata and the default print size without adding or removing any pixels. In Photoshop: Image Size with "Resample" unchecked.
Example: A 3000x2000 image at 72dpi (default print: 41.67"x27.78"). Resize to 300dpi without resampling: still 3000x2000 pixels, now with a default print size of 10"x6.67". No quality change. No new data. Just a different number in the metadata.
This is the correct operation when preparing an image for print. You're not changing the image — you're telling the printer what size to output it at.
Resampling: Changing Pixel Count
Resampling adds or removes pixels, changing the actual image data. In Photoshop: Image Size with "Resample" checked.
Upsampling (adding pixels): The software invents new pixels by interpolating between existing ones. Bicubic Smoother (Photoshop), Lanczos, or AI-based upscalers (Topaz Gigapixel). The result is always softer than a natively captured image at the target resolution. Upsampling a 1000px image to 3000px doesn't add detail that wasn't in the original — it smoothly interpolates existing detail.
Downsampling (removing pixels): The software combines multiple pixels into fewer pixels. Bicubic Sharper (Photoshop), Lanczos. This is a normal, quality-preserving operation. Exporting a 6000px camera image at 2000px for web is routine downsampling with no meaningful quality loss.
Practical Resolution Guidelines
| Scenario | What Matters | Target |
|---|---|---|
| Website hero image | Pixel width | 1920–2560px wide (4K: 3840px) |
| Blog post image | Pixel width | 800–1200px wide |
| Social media | Platform dimensions | 1080x1080 (IG feed), 1200x630 (FB OG) |
| Email image | Pixel width | 600px wide max (compatibility) |
| Print brochure photo | Pixels at print size | Width" x 300 = pixels needed |
| Large format print | Pixels at print size | Width" x 150 = pixels needed (minimum) |
| Mobile app icon | Exact pixel sizes | 1024x1024 source, export at required sizes |
| Favicon | Multiple fixed sizes | 16x16, 32x32, 48x48, 180x180 (Apple Touch) |
Resolution confusion costs real money and time: undersized images reprinted, oversized web images wasting bandwidth, and hours spent changing DPI metadata that has no effect on anything visible. The rules are simpler than the confusion suggests: for print, calculate the pixel count needed from the physical size and target PPI. For screen, determine the pixel dimensions from the display container and device pixel ratio. DPI metadata is useful for print size defaults and nothing else.
When you need to convert between formats while maintaining the right resolution for your output, ChangeThisFile preserves pixel dimensions through the conversion process — no unexpected resampling.