Design Atlas
한국어
✎ Graphic, brand & print

DPI / PPI

DPI/PPI

At the same physical print size, fewer pixels packed into it look blocky and more look crisp — a file can look fine on screen and still fall apart in print.

Also known as: 해상도ResolutionPrint resolution
···
html
<div class="row">
  <div class="chip"><canvas id="lo" width="12" height="12"></canvas><span class="cap">72 dpi</span></div>
  <div class="chip"><canvas id="hi" width="200" height="200"></canvas><span class="cap">300 dpi</span></div>
</div>
css
.row{display:flex;gap:8%;align-items:center;justify-content:center;width:100%;height:100%}
.chip{display:flex;flex-direction:column;align-items:center;gap:8px}
canvas{width:min(120px,34vw);aspect-ratio:1;border-radius:14px;box-shadow:0 0 0 1px var(--line);animation:breathe 3.6s ease-in-out infinite}
#lo{image-rendering:pixelated}
#hi{image-rendering:auto}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.cap{font:700 10px/1 ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
js
function draw(id, res) {
  const c = document.getElementById(id);
  const ctx = c.getContext('2d');
  const bg = getComputedStyle(document.documentElement).getPropertyValue('--surface') || '#fff';
  ctx.fillStyle = bg.trim() || '#fff';
  ctx.fillRect(0, 0, res, res);
  ctx.fillStyle = '#5b5bf7';
  ctx.beginPath();
  ctx.arc(res / 2, res / 2, res * 0.36, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#f25c8a';
  ctx.fillRect(res * 0.1, res * 0.1, res * 0.22, res * 0.22);
}
draw('lo', 12);
draw('hi', 200);

PPI (pixels per inch) is how many actual pixels an image file packs into one inch; DPI (dots per inch) is how many ink dots a printer lays down per inch. They're technically different, but in practice people use them interchangeably to mean "image resolution."

The same image can look sharp on screen (72–96 PPI is plenty there) and still fall short of the roughly 300 PPI print shops ask for — enlarge it and the pixels show up as visible little squares. This is exactly what happens when a web-downloaded image gets blown up for print.

Stretching a file doesn't add resolution — you can't invent detail that was never captured, so even Photoshop's "Image Size" upscaling has limits. Decide the print size first, then source an original that actually delivers 300 PPI at that size.

When to use

When receiving an image for print, check whether it hits ~300 PPI at the actual print size — not the file size in KB. Large-format banners viewed from a distance can get away with 100–150 PPI.