Archive for January 23rd, 2009

Understanding DPI

DPI is a seemingly simple concept, but there is widespread misconception on what it actually is, and where and how it matters. This is an old topic, but people keep getting it wrong. It’s never bad to revisit things like this and extend our understanding.

DPI vs. PPI

Designers know that DPI (Dots Per Inch) is a measure of how many ink dots a printer is capable of placing along a one inch line. Many designers incorrectly believe that DPI is also a measure of how many image pixels will be placed along a one inch line. There’s a separate term for this: PPI (Pixels Per Inch). Pixels per inch is also used in scanning, where a physical item is converted into a pixel grid.

dpi-vs-ppi.png

This is a real easy one to remember: If it’s an output device like a printer, the correct term is DPI. If it’s digital media where pixels are used, (like a digital photo or scan,) it’s PPI.

The confusion is widespread. Many stock photo sites sell images at various DPI values. As of this writing, even Wikipedia discusses digital images in the DPI section. But, take a look a Photoshop’s “Image Size” window. It clearly states “Pixels/Inch” under “Resolution”.

PPI doesn’t matter on the web

Try this: Create a new photoshop document at 300×300px, and set the resolution to 100 PPI. Now, create a second image at 300×300px, this time set the resolution to 200 PPI. Fill both with a solid color. View both on your computer at 100%. They’re the same size on screen: They each use 300×300 pixels on the screen. Now, print both from photoshop at 100%. You’ll notice that on paper, their size differs considerably.

pixel-data-comparison.png

When an image is displayed on the web, it is done so as if it were being viewed at 100%. The PPI value only applies when an image is being printed.

PPI is not a measure of image quality

If you saved the images from the example above and looked at their file sizes, they would be identical. A lower PPI value does not necessarily have less information. The only measure of how much digital information is contained in an image is the number of pixels.

pixel-vs-resolution-comparison.png

A smaller image at a higher PPI value may contain less information than a larger image at a lower PPI value. It’s easy to figure out which image has more information: multiply the dimensions by the PPI value, and compare the pixel count.

Photoshop allows you to change the PPI value without touching the pixel information. To do this, uncheck “Resample Image” in the “Image Size” dialog. Any changes you make in this way will affect neither how large your image is displayed on screen, nor how large your image is displayed on the web, nor the size of the file when you save it. The only thing you are changing is how large it will print. Any image can be adjusted to print at any size or resolution without changing the pixel data.

PPI cannot exist alone

Since the PPI value can be changed without changing any pixel data, it’s not possible to know how much information is contained in an image if all you have is a PPI value.

ppi-comparison-with-same-pixels.png
Occasionally, stock agencies will sell different image sizes by offering the images at various “DPI” dimensions. There’s very critical information missing here. When the agency does not provide pixel dimensions (or physical dimensions) in addition to PPI, then it’s possible that the agency can sell you the exact same pixel data for all of these image sizes. Most importantly, you have no idea how large and at what quality you are actually able to use the image until after you’ve bought it.

When a client sends you an image, remember: you can always change the PPI value if it’s wrong, but if you don’t have enough pixel data, you’re out of luck.

-Michael Niggel

January 23, 2009


 

January 2009
S M T W T F S
« Nov   Feb »
 123
45678910
11121314151617
18192021222324
25262728293031

Categories

Feeds

Recent Comments

Stephen Rovetti on Fresh Squeezed
Tom Gurney on Cezanne: the new Comic Sa…
Michael Niggel on New Free Font for you! Rovetti…
Stephen Rovetti on New Free Font for you! Rovetti…
Michael Niggel on New Free Font for you! Rovetti…

Blogroll

Flickr Photos

youonly.2FIN

1032068329_478dd3e212_m

city-logos1

More Photos

Blog Stats

Tags

abr file Adobe AIGA AIGA NH/VT awards brushes campaigning cartoons Center for Cartoon Studies Cezanne Chip Kidd Chris Ware comics Debbie Millman design Election exhibit fonts graphic design graphic designer handmade logo design Marian Bantjes marketing member Movie posters Obama opinions PhotoShop pop culture poster posters presidential politics profile rovettidesign RSS feeds Saul Bass Shepard Fairey Smashing Magazine Star Wars The Learners The Savages typographic valentines workshop