Try Now
Image Basics

Understanding Image Resolution: DPI vs PPI (and What Actually Matters)

DPI vs PPI explained with real examples for web, email, and print—plus simple calculations and practical resizing workflows.

Clean infographic showing pixels, inches, and printer dots with a simple DPI vs PPI comparison

People throw around “resolution” like it’s one thing.

“Make it 300 DPI.” “This is only 72 DPI, it’ll look bad online.” “Can you increase the DPI without losing quality?”

Honestly, I get why it’s confusing. “Resolution” gets used to mean at least three different concepts, depending on who you’re talking to: a designer, a photographer, a print shop, or a web developer.

So let’s make it simple—without dumbing it down.

By the end of this guide, you’ll know:

  • what PPI and DPI actually mean
  • why changing DPI often changes nothing
  • how to calculate print sizes from pixels (and vice versa)
  • what “Retina” really changes for web images
  • a clean workflow to prep images for email, web, and print using File Gulp tools

The short version (if you’re mid-project and slightly panicking)

  • For web/email, what matters is pixel dimensions (like 1600×900), not DPI.
  • For print, what matters is pixel dimensions + intended print size (in inches/cm), expressed as PPI (like 300 PPI).
  • DPI is a printer concept (dots of ink). People say DPI when they mean PPI, and the world keeps spinning anyway.
  • Changing an image from 72 DPI to 300 DPI without resampling doesn’t add detail—it just changes the “print size” tag.

If you need to fix a file right now:

What “resolution” can mean (three different conversations)

When someone says “resolution,” clarify which one they mean:

  1. Pixel dimensions: 4000 × 3000 pixels
    This is the real “how much image you have” number.

  2. Pixel density for print (PPI): 300 PPI
    This tells you how tightly those pixels are packed when printed.

  3. Printer dot density (DPI): 600 DPI, 1200 DPI
    This describes how a printer places ink/toner dots—not the image pixels.

It’s not just semantics. Mixing these up is how people end up sending a tiny image to a print shop and wondering why it looks like it was carved out of LEGO bricks.

Infographic showing pixel dimensions, PPI for print size, and DPI for printer dots as three separate concepts
Same word (“resolution”), three different meanings. That’s the whole problem.

PPI: pixels per inch (the print-sizing math)

PPI means pixels per inch. It answers: If I print this image, how many pixels land in each inch of paper?

The core relationship is:

Print size (inches) = pixels ÷ PPI

Example:

  • Image: 3000 × 2400 px
  • Print at 300 PPI
  • Size: 3000/300 = 10 inches, 2400/300 = 8 inches
    So it prints as 10×8 inches at 300 PPI.

Same image, different PPI:

  • At 150 PPI, it prints 20×16 inches (but less detail per inch)

Why 300 PPI is “the standard” (and why it’s not magic)

You’ll hear 300 PPI a lot because it’s a common target for high-quality print viewed at close distance (magazines, brochures, portfolios, product packaging). It’s not a law of physics. It’s a practical convention.

Adobe’s own explanations on image size/resolution are a good reference for how print resolution ties to output size and quality. (helpx.adobe.com)

Viewing distance changes everything (the poster problem)

A billboard doesn’t need 300 PPI. People view it from far away.

A useful mental model:

  • Close viewing (books, prints in hand): higher PPI matters
  • Far viewing (posters, signage): lower PPI can be perfectly fine

So when a print shop says “we prefer 300,” it often means “we prefer predictable results for typical print products.”

DPI: dots per inch (a printer behavior, not your file’s detail)

DPI is dots per inch—how densely a printer can place dots of ink or toner.

Here’s the key: a printer can use multiple dots to represent one pixel of your image, depending on the print process, screening method, and color handling.

So your image might be 300 PPI, and the printer might be running at 1200 DPI. Those aren’t in conflict—they describe different parts of the pipeline.

If you want the “official-ish” framing, this distinction is commonly explained in printing and imaging references, and it’s also reflected in how software separates image resolution (PPI) from device output capabilities (DPI).

The myth that refuses to die: “72 DPI is web resolution”

Between you and me, this myth is the reason half of the internet has mild resolution anxiety.

Why people believe it

Older systems and some software defaults used 72 PPI historically. Early Mac systems used a 72 PPI assumption for screen mapping, and later Windows often referenced 96 PPI as a baseline. That history left a stain on the collective brain.

Why it’s wrong in modern web practice

On the web, browsers render images based on pixel dimensions, CSS layout, and device pixel density—not on the DPI metadata embedded in the file.

MDN’s docs around responsive images and CSS sizing reflect how web layout actually works: the browser cares about pixels and layout rules. (developer.mozilla.org)

If you upload:

  • 1200 × 800 px image …and you set it to display at 600px width in CSS, it will display at 600 CSS pixels wide, regardless of whether the file says 72 PPI or 300 PPI.

The one thing that truly matters: pixel dimensions

If you want a clean sentence to keep in your head:

Pixel dimensions are the real resolution. PPI is how you spend those pixels in print.

This is why a “300 DPI” image can still be unusable. If it’s only 600×400 px, it can be tagged as 300 PPI, but it will only print as 2×1.33 inches at that density.

That’s also why a “72 DPI” image can be perfectly fine. If it’s 4000×3000 px, it can print big and look great.

Changing DPI in metadata vs resampling (this is where confusion peaks)

When you “change DPI” in an editor, two very different things might happen:

1) Changing the PPI metadata only (no resampling)

  • Pixel dimensions stay the same.
  • The file’s suggested print size changes.
  • Image detail does not change.

Example:

  • 3000×2000 px at 300 PPI → 10×6.67 inches
  • Change to 150 PPI (no resample) → 20×13.33 inches
    Same pixels. Bigger print. Lower detail per inch.

2) Resampling (adding/removing pixels)

  • Pixel dimensions change.
  • The editor interpolates pixels (best guess math).
  • You can lose detail when downsampling or create softness/artifacts when upsampling.

Adobe explains this distinction clearly in their “Image Size” documentation: resampling is the part that changes pixel data. (helpx.adobe.com)

If you’re prepping for web or email, you’re usually doing controlled downsampling:

Practical print math (with examples you can reuse)

Here are the calculations you’ll actually do:

A) You have pixels → you need print size

Print inches = pixels ÷ PPI

Example: 3600×2400 px

  • At 300 PPI → 12×8 inches
  • At 240 PPI → 15×10 inches
  • At 200 PPI → 18×12 inches

B) You have a print size → you need pixels

Required pixels = inches × PPI

Example: You want an A4 print (roughly 8.27 × 11.69 inches)

  • At 300 PPI:
    • 8.27×300 ≈ 2481 px
    • 11.69×300 ≈ 3507 px
      So you want roughly 2480×3508 px (very close to A4 at 300 PPI).

A4 is defined in the ISO 216 paper standard (based on √2 proportions). (en.wikipedia.org)

Worked example showing a pixel dimension converted into inches at 300 PPI and 150 PPI with simple equations
Same pixels, different print sizes. PPI is the exchange rate.

Cheat tables: pixels you need for common print sizes

These are approximate, but they’re the kind of numbers you want on hand when someone asks for “print-ready.”

At 300 PPI (high-quality close viewing)

Print size (in)Required pixels (approx)
4×61200×1800
5×71500×2100
8×102400×3000
11×143300×4200
16×204800×6000
24×367200×10800

At 150 PPI (posters, farther viewing)

Print size (in)Required pixels (approx)
8×101200×1500
16×202400×3000
24×363600×5400

If you’re in a “we need it big” situation and your source image isn’t large enough, upscaling can help a little, but it won’t create true detail. It’s better than nothing, not a miracle.

Screen “resolution”: why PPI still shows up in web conversations

Web folks talk about Retina and high-density screens for a reason. It’s not DPI—it’s the relationship between CSS pixels and device pixels.

CSS pixels vs device pixels (the hidden translation layer)

A browser lays out your page in CSS pixels. Your device has physical pixels.

On a high-density screen, one CSS pixel might map to 2×2 (or 3×3) physical pixels. That’s why images can look soft if you only provide a 1× source.

This is often described via the devicePixelRatio concept in web dev. MDN covers window.devicePixelRatio and related layout behavior. (developer.mozilla.org)

What “2× images” really mean (without the hype)

If your layout displays an image at 800 CSS pixels wide and the device pixel ratio is 2, the device has room to render up to 1600 physical pixels for that slot.

So you can export:

  • 800px wide (1×) → acceptable, can look slightly soft
  • 1600px wide (2×) → sharper on high-density screens

This is the same logic behind exporting iOS assets at @2x and @3x in Apple’s ecosystem. Apple’s Human Interface Guidelines talk about scale factors and pixel density in UI terms. (developer.apple.com)

Diagram showing one CSS pixel mapping to multiple device pixels on a high-density display with 1x and 2x image examples
High-density screens don’t need “DPI images.” They need enough pixels.

Web + email: the practical rulebook (no DPI required)

If your goal is web/email performance and sharpness:

1) Decide display size in CSS pixels

  • Blog content images often display around 700–900px wide.
  • Email templates often use ~600px content width.

2) Export 1× or 2× based on how crisp it needs to be

  • For photos: 1× is often fine, 2× for heroes or text-in-image
  • For UI, logos, diagrams: 2× helps

3) Resize and compress in the correct order

4) Choose a format that matches the platform

5) Strip metadata when it matters

If you’re sharing publicly or with clients, remove EXIF/GPS:

If you want a deeper web-focused workflow, your resizing guide pairs well with this mindset:

Print is where “300 PPI” becomes meaningful, because you’re mapping pixels to inches.

A calm print workflow looks like this:

  1. Confirm the intended print size (in inches/cm)
  2. Ask the printer what they want (often 300 PPI for close-view products)
  3. Calculate whether your pixel dimensions are enough
  4. If needed, resize/resample carefully (and don’t overpromise)
  5. Export in an appropriate format for the print pipeline (often TIFF/PDF, sometimes high-quality JPG)

If you’re prepping a proof for a client (not final print production), you can also generate a sensible JPG preview:

“DPI requirements” from clients: how to respond without starting a fight

When someone says “I need this at 300 DPI,” they usually mean one of these:

  • “I need this to print at X size and look sharp.”
  • “My printer told me 300 is good.”
  • “I heard 72 is bad.”

A helpful response is to ask:

  1. What physical size are you printing?
  2. What are the pixel dimensions of the file you have?

Then you can do the math in one line and give them a real answer.

Common myths (and the truth behind them)

Myth 1: “Set it to 300 DPI and it becomes print quality”

Truth: If you don’t add pixels (resample) or start from a higher-res file, nothing improves.

Myth 2: “72 DPI is for web”

Truth: Web cares about pixels and layout, not DPI metadata.

Myth 3: “Higher PPI always means better”

Truth: Higher PPI at the same print size means more detail. But if the source is noisy, compressed, or out of focus, higher PPI won’t fix it.

Myth 4: “If it looks sharp on my screen, it will print sharp”

Truth: Screens are backlit and forgiving. Print reveals softness quickly, especially on text and fine line art.

Myths versus reality chart about DPI and PPI including 72 DPI web myth and 300 DPI print myth
Most “DPI drama” comes from mixing metadata with actual pixel count.

A simple File Gulp playbook (web, email, print-proof)

If it’s for web

If it’s for email

If it’s for a print proof (client approval)

Quick recap (the sticky-note version)

  • Pixels are the real resolution.
  • PPI tells you print size from pixels (or pixels needed for a print size).
  • DPI is about printers placing dots, not your image file’s detail.
  • Changing DPI metadata doesn’t improve quality unless you resample (and even then, you’re interpolating).
  • For web/email, ignore DPI and focus on pixel dimensions, format, and compression.