The ultimate guide to image resolution

Brush up on your knowledge of image resolution, from pixel size to DPI.

For old hands, image resolution and DPI make perfect intuitive sense, but for folk just starting out – or, with wearying inevitability, for those with whom designers collaborate who aren't themselves design professionals – it can be a hideously baffling mess. Yet when you try to answer the question 'what is DPI?', you end up tying yourself in knots – as I can attest from the writing of the below – and so we're here to help.

This guide is designed to help everyone understand image resolution, whether you're just starting out; work in a department such as marketing where you have to deal with design professionals; or even are a seasoned pro who needs to point a colleague to a guide that helps explain why, no, just changing the resolution to 300dpi in Photoshop doesn't magically make it a 300dpi image. Well, it does... but not in the way I mean, OK?

Which brings me to: this guide will contain a lot of lies to children; that is, some of what I say will be a simplification, and though I'll add some caveats and detail later, I want to try to keep things simple early on.

A tangent on vector formats

We'll be discussing bitmap formats below (broadly speaking, things like JPEG, PNG, GIF and PSD) because they're the tricky ones when talking about image size: they contain a finite amount of detail. Vector images such as EPS, SVG and AI are usually infinitely scaleable. They have their own problems, but we're ignoring them here!

What is a pixel?

What is DPI The ultimate guide to image resolution

Bitmap images are formed of rows of coloured squares

So probably everyone knows this, but we need to start at the beginning. Irrespective of the format they're saved in, bitmap images are all formed in the same way: rows and rows of coloured squares stacked on top of each other. Zoom into a bitmap image far enough and you can see these squares – 'picture elements' or pixels; a little like individual tiles in Roman mosaics or stitches in cross-stitch – but pull back and your eyes just perceive them as smooth gradients and unbroken lines.

What is DPI?

DPI stands for 'dots per inch'. Broadly, the higher the DPI, the more information there is in an image, so the more detail you can see and the crisper it looks.

Think of it this way: if you were constructing a photo on a wall using coloured tiles which were each an inch square, your image would have a resolution of 1dpi, and you'd have to stand quite a way back to see the image as smooth and coherent. If you instead used tiles half an inch on each side, you'd produce something that was 2dpi, and which you wouldn't have to stand as far back before it stopped looking blocky.

(Technically, you only use 'dots per inch' when discussing printed output, while 'pixels per inch' is for displays and digital images, and 'samples per inch' for scanners, but the concepts are all so closely related that at this stage in the explanation, you can treat them interchangeably. This is the most egregious lie to children in this piece; clarification coming later!)

Ask not how many pixels per inch, but how big the pixels

The above sounds pretty simple – 'more dpi' equals more better, right? – but there's a problem. The problem is that the size of the pixels – or tiles, in the analogy above – is only one of two factors that govern image size and quality. The other is the physical size of an image once it's printed, and the thing that ties them together is how many pixels there are in an image: the pixel dimensions, often expressed as a number of pixels wide and a number tall, such as 640×480.

(In photography, image size is usually expressed as megapixels, but that's just arrived at by multiplying the number of pixels wide by the number of pixels tall the images a camera produces are. 640×480=307,200, and since that answer divided by a million – the 'mega' in megapixels – is 0.3, early cameras could be said to produce '0.3 megapixel' images.)

The two things – how many dots per inch, and how big the image ends up – are completely dependent on each other (with a caveat that's coming up after Example B); change one, and the other changes.

I'm going to give you some examples to help explain how this works, but viewing them here on screen (especially if you're on a smartphone) is only an indication of the effects we're talking about; to get the effect for real, download and print out this PDF, and follow along! The figures I mention refer to this document, not what you see on screen.

I've given a photo and logo for each example, as the effect can sometimes affect different types of images in different ways.

Example A: Same pixel dimensions, higher DPI; lower physical size

What is DPI The ultimate guide to image resolution

What is DPI The ultimate guide to image resolution

Here, there are the same number of pixels in the images on the right as in the originals on the left, but we've just raised the DPI value from 72 to 300. The effect is that there are now more dots to each inch, but because the total number of dots making up the image hasn't changed, the mathematical inevitability is that the image becomes smaller, since each of the pixels which make up the image has become smaller in order to fit more of them into an inch. 

The grid of pixels that makes up your computer screen never change size – 'a pixel' is a abstract, sizeless thing – but the pixels that make up an image can be printed at any size you like. Below, simplified, is what's happening:

What is DPI The ultimate guide to image resolution

Example B: Same physical size, lower DPI; lower pixel dimensions

What is DPI The ultimate guide to image resolution

What is DPI The ultimate guide to image resolution

On the left are the original images. On the right, each has had the number of pixels reduced to about a quarter of the original values while maintaining the same physical size, which means that each individual pixel has got bigger and thus the DPI value has dropped (since there are fewer dots fitting into every inch). Here, simplified, is what's happening:

What is DPI The ultimate guide to image resolution

Interpolation interjection

With me so far? Good, because I'm about to throw a curveball. While Example A doesn't change the amount of information in the image, and Example B reduces it, you can add more information through a process called interpolation. Think of it like this: if you have a blue pixel next to a yellow pixel and want to add a third pixel in between – so that you can either increase the DPI while keeping the image the same physical size, or more usually to increase the size at which it can be output while maintaining a similar DPI – then the computer can guess that that pixel should be green.

Sounds great, but in practice, you can't just magic up loads of information that wasn't there in the first place, and that's why taking, say, a 150dpi image and making it 300dpi (at the same physical size) isn't a solution to the problem of not having sufficient resolution.

Example C: Higher pixel dimensions (interpolated), same physical size; higher DPI

What is DPI The ultimate guide to image resolution

What is DPI The ultimate guide to image resolution

On the left, a 72dpi image, and on the right a 300dpi image made by interpolating information from the one on the left. Here, simplified, is what's happening:

What is DPI The ultimate guide to image resolution

However, look more closely at the 300dpi image we just made with interpolation (below, left) and a 300dpi original (below, right), and you'll see that the 'fake' detail we've added with interpolation doesn't compare to an image that genuinely has all that detail. On the PDF, compare the image at the bottom right with the one on the left of the middle row.

What is DPI The ultimate guide to image resolution

What is DPI The ultimate guide to image resolution

Next page: How to work with image resolution in Photoshop