DPI (Dots Per Inch) is an interesting topic. Once understood, the concept becomes more straightforward, but explaining it requires some exposition. It’s often confused with pixel resolution, and its importance for web imagery and general use is sometimes misunderstood.
To further confuse matters, you’ve also likely seen the term PPI used—this acronym means Pixels Per Inch, although you’d be forgiven for thinking it’s also something you were mis-sold when you applied for credit. In any case, DPI and PPI are often conflated, and there will be an eternal debate about the term DPI being used incorrectly in the place of PPI. Even software and entire operating systems use DPI, when really PPI would be more technically accurate—this article will mainly focus on using DPI as its working term.
DPI is used to calculate physical measurements. Printers, for example, don’t work in pixels, so we need a way of translating our content on screen—pixel dimensions—to a printable format. Thus we have the dots-per-inch measurement, which defines the print density and bridges the physical measurement of inches with our digital pixel resolutions.
Say you want to print a 6x4” photograph at 300 dots-per-inch, which is considered optimal for high resolution printing. To achieve this, we would calculate:
6x300 = 1800
4x300 = 1200
Therefore, when creating a new document or resizing an image, we could set the width and height in pixels to 1800x1200px. If we were then to send this to the printer with an instruction to print at 300 dots-per-inch, the result would be exactly 6x4 inches in physical size. Similarly, let’s say we want to print an 8x10” photograph at 300 dots-per-inch:
8x300 = 2400
10x300 = 3000
This time we would set our document size in pixels to 2400x3000px. Again, once sent to a printer at 300DPI, the result would be an exact 8x10” print.
Let’s say however that we wish to print an 8x10” photograph, but at 200DPI instead:
8x200 = 1600
10x200 = 2000
As you can see, this is a lower pixel resolution. If we were to send this image to the printer at 200DPI, the physical size would be correct at 8x10”. However, if we sent it at 300DPI with no scaling, the resulting image would measure smaller—5.3x6.6” to be precise.
With this in mind, think of DPI as a bridge between physical measurements and digital pixels. It’s a way of determining the size and quality for print media.
DPI for Print Work
DPI is used heavily for preparing work for print or editorial purposes. If you are having a banner printed, for example, you may be asked to provide the output in inches or centimetres, but at a DPI of 150 or 120. For example, let’s look at a design specification for banner printing:
28in by 14in at 120DPI
When we enter these values into a new document dialog, we end up with the following pixel resolution:
3360x1680 px
Seems like a small pixel resolution for a large print size doesn’t it? In fact, the resolution barely equates to bigger than 5 megapixels. We do however need to take into account the print media: banners are large advertisements, designed to be seen and read at a distance, not scrutinised up close. The print density can therefore be larger: this corresponds to a lower DPI, and subsequently a lower pixel resolution.
Conversely, if we were to try and create a document with those measurements at 300DPI, our pixel resolution would be:
8400x4200 px
That’s roughly 35 megapixels—not unreasonable, but still quite large. What if we were designing a really large banner though? Let’s say 8 x 3 feet (or 96 x 36 inches):
28800x10800 px
That’s huge! It’s also difficult to edit, and even more difficult to obtain source material for (e.g. photography). This kind of density is also redundant—it’s unlikely we would see and appreciate the difference at the banner’s intended viewing distance.
Does DPI (or PPI) affect quality?
This is where it gets confusing. Regular digital content, such as web imagery, often has a DPI/PPI of 72 or 96 mandated in its metadata. Nowadays, in the majority of cases, these numbers are considered arbitrary. Just because this value is lower does not mean it is lower in resolution or quality. It is simply a measurement value that helps to determine the display and print size.
What is crucial here is the pixel dimensions, or the resolution. This is the physical number of pixels that make up the image, and is what dictates the clarity and visual fidelity of the image. An image at 3840x2160, for example, would contain more detail and would be able to display larger than the same image at 1920x1080. Both images could have a DPI/PPI of 72, but this number is irrelevant to the clarity of the image being displayed digitally.
An example of where the DPI values may actually be used is in page layout/desktop publishing software—the DPI value is often used to calculate the initial size of an image when it is placed onto a page (relative to the document’s DPI and size).
Handling High DPI/Retina
With the advent of High DPI and Retina displays, this has resulted in further confusion as to DPI’s relevancy in displaying digital content. The premise behind High DPI is having a higher pixel density—essentially, cramming more pixels into the same physical display sizes.
Let’s take a typical 24-inch monitor as an example. Traditionally, we associate this size with a pixel resolution of 1920x1080 (or 1920x1200 if you remember when 16:10 was in vogue). A High DPI screen at the same size, however, may boast a pixel resolution of 3840x2160. This is quadruple the number of pixels on the same size screen, resulting in a higher pixel density and a crisper image.
In order to then deliver image content that matches the clarity and crispness of these screens, we need to provide alternative, higher resolution versions of our imagery. Whereas an icon in an app could display at 32x32 pixels on a normal screen, providing a version at 64x64 pixels would be prudent for high DPI screens for a sharp and professional result. Crucially, the icon would maintain the same physical size on screen despite a larger pixel resolution.
With that lies the general answer: what matters is the increased pixel resolution. The accepted convention is to provide versions of the images that are double the pixel resolution: 1600x1200 becomes 3200x2400 for example. That way, the 3200x2400 image occupies the same physical space as the 1600x1200 image, but the increased pixel density allows it to look sharp on a high DPI screen.
With web and UI imagery, the convention is to have @1x, @2x (and so on) affixed to the filename to denote the density. @2x is generally twice the resolution of @1x, although this is not set in stone: you could have resolution variations like 512px, 960px, 1280px, 1600px, 2560px, etc.
Logical vs Physical pixels
You may have seen these two terms used, especially within web design. There’s a clear distinction:
- Logical pixels are the logical display size, e.g. 1920x1080
- Physical pixels are the actual number of pixels that represent this display size, e.g. 3840x2160
Here’s a great example—you may have a smartphone screen that displays 3x the physical pixels versus its logical pixels. Logically, its screen size may be 640x360, but the physical pixels representing this size might be 1920x1080. The result is a very crisp image with no discernible ‘jaggies’ (or sharp edges).
My preferred term for explaining logical pixels is ‘real estate’. For example, a 24-inch monitor with a screen resolution of 1920x1080 grants you a certain amount of ‘real estate’—usable space. A screen resolution of 3840x2160 could in theory give us double that real estate, but on that same 24-inch monitor everything is going to look far too small—instead, the entire operating system interface is scaled to be larger.
The above screen capture indicates this very clearly. On the left, the screen resolution is set to 3840x2160. On the right, the screen resolution is also set to 3840x2160 but in ‘High DPI’ mode, which means macOS is performing 200% scaling of the interface (and therefore giving a ‘logical’ resolution of 1920x1080). Windows offers a more flexible system where you determine the scaling in a percentage, so if you wanted more ‘real estate’ you could reduce the scaling to, say, 175% instead of 200%. macOS also offers this in a slightly more restrictive form: display scaling in System Preferences allows you to choose based on a preference of ‘Larger Text’ or ‘More Space’.
Just one final example of ‘real estate’: Apple’s 27-inch 5k iMacs run at a high resolution of 5120x2880, but if you were to display that size logically everything would be tiny. Instead, as mentioned above, the interface is scaled to 200%, so you actually end up with a logical resolution of 2560x1440 (which, by the way, is still nothing to turn your nose up at).
To conclude
Perhaps the most useful advice when it comes to digital content is… don’t worry too much about DPI! Focus on your pixel resolution, as that ultimately dictates the detail and clarity of your images. DPI alone does not dictate the resolution of your image: it is however used to calculate the ‘physical’ size of your image for print.
When dealing with print work, a recommended workflow for accurate prints is to create a new document with your required measurements and use an optimal DPI value. 300 works well for the majority of smaller print work (up to A3), but don’t be afraid to use lower DPI values such as 200 for larger prints: printers generally do a respectable job of interpolating this information and producing good quality results.
In a nutshell:
- Digital/screen work: Think in pixels, eg 2560x1440
- Print work: Think in dimensions and DPI, eg 5x7 inches at 240 DPI.