PPI or DPI

Introduction

Both measures are based upon the fixed physical measurement unit, an inch. Therefore, the logic of claiming one is for screen workflows and one for (physical) print workflows appears confusing. For the most part, we don’t have to worry too much about the differences, but there are a few use cases where we do.

It’s Photoshop’s Fault

The industry standard for image editing, whether for screen application or print, is Adobe Photoshop. It has been using DPI as a a measure since 1990. In those days, screens had a screen pitch of around 72 dpi (72 ppi), hence the [continuing] ‘default’ setting of 72 dpi for screen use today. Whilst somewhat of a misnomer now, it still serves as cognitive baseline for understanding that the image is for online (website) use.

Pixels Per Inch (PPI)

This is used to describe the pitch of a screen. There is no standard as screens can range between 40 ppi (on-street advertising unit) to 563 ppi (mobile phone). In the first instance, an image should be sized by its actual pixel dimensions to be displayed on-screen. For example, if a monitor/screen has a FHD display, an image simply needs to be 1920 × 1080 pixels in size to fill it, whatever physical dimensions that display may have. Increasing the PPI, or DPI, will render no improvement to that image, though I have worked with many people that believe that to be true, even those working exclusively with screen-based media. However, that’s not quite the complete picture as you will read shortly.

Dots Per Inch (DPI)

A term from the print industry, stating the resolving power of a print head. Typically, a printer—or should I say a Raster Image Processor (RIP)—has a range from 300 dpi (basic office laser printer) to over 4800 dpi (professional/commercial printers).

If you sent your ‘raw’ 1920 × 1080 pixel image to the office printer, it will fill most of an A4 sheet of paper. Make sure the often default setting of ‘fit to page’ is unchecked! If you then sent that same raw image to a 2400 dpi photo printer, that image may only print out around the size of a stamp. If you forced it to fill the page, it may end up looking quite ‘blocky’, or pixellated; the printer resolution is revealing the shortcomings of that image..

The World of Print

Designers have used the two measures interchangeably for years, with no real impact upon set workflows. When laying out a document for print, you are ascribing an image a real world size on a sheet of paper. That image will reproduce similarly whether 300 dpi or 300 ppi, assuming a standard digital or litho print process. Changing the size of that image on the page will change the effective DPI/PPI. For example, to fill an A4 sheet of paper with an image so that that image has an effective 300 dpi, or thereabouts, it would need to be 3600 ×^thinsp;2500 pixels in size.

There are other print processes that require different DPI settings. Images reproduced on other substrates, other than paper, often don’t need a resolution much greater than 150 dpi. Some digital print technologies interpolate (up-sample) images, thereby compensating for low-resolution. The fine nature of stochastic printing (screening) benefits from images that are at least 600 dpi/ ppi.

Life on Screen

It’s the screen-based world which has added to the confusion in recent times. In respect to hardware that most of us own—a mobile, tablet/laptop and/or desktop computer—all will have a different screen PPI. The desktop computer will have the lowest, typically around 100–140ppi; your tablet/laptop probably around 140–220ppi; and your mobile highest, around 220–560ppi. Thus an image of certain pixel dimensions will look a different size on all devices—except—there are sneaky strategies for serving up images in web browsers that trick users.

We often assume only one image is required, but designers/developers will serve up different versions of an image dependent upon the PPI of the device, targetted primarily at mobiles and tablets. After pulling the trick of telling the browser that whatever PPI the device has, assume the width of the site/page is the full width of the device, and the default scaling point.

If the standard (_1x) image is deemed good enough for that device, job done. But if the server detects that the device has a high PPI—what Apple refers to as a Retina¹ screen—it will serve up a _2x or _3x version of the image; literally an image of twice or three times the dimensions. Simply, this ensures the image looks as good as it can do for the device PPI, as well as accommodate responsive behaviour.

¹ Apple describes a Retina screen as one that has a display of 326ppi or greater. At a distance of 300mm (12-inches) the eye can no longer discern the individual pixels.