The ultimate guide to image resolution

[Rss Bot 1]

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?

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

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:

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

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:

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

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:

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.

Next page: How to work with image resolution in Photoshop

How do you actually do all this in Photoshop?

The 'Image Size…' dialogue in Photoshop – or similar apps – looks simple, but it's a minefield if you don't know what you're doing. If you remember nothing else, remember that all the fields are essentially connected (because the pixel dimensions, resolution and physical printed size are). Changing one value will change others too, depending on what kind of resizing you're trying to do. Here's a guided tour.

1. This maintains the aspect ratio – the relationship between the width and the height – and for almost every job you do, this should be active. Click to toggle.
2. You can see the image size displayed in pixels, centimetres or other measurements. Note that of course everything's still interrelated, so if you switch to centimetres and change the values, the pixel count might change as well.
3. This is the DPI (or, more correctly, the PPI; clarification coming…) of the image.
4. This is the tricky one. With this Resample option unchecked, the pixel dimensions – the number of pixels across and down – of your image won't change as you tweak the values. You're essentially just making each individual pixel bigger and smaller for output (Example A) when you adjust the resolution or physical size. With this box checked, you're changing the pixel dimensions, either up or down. If you ultimately add more pixels (keep an eye on the Dimensions readout at the top), they'll be added using interpolation (Example C).
5. You have some options for how the image is resampled here; if you're unsure, leave it on Automatic. 'Nearest Neighbor' is the only option not to use interpolation, and you should usually not use it; a common exception is if you're dealing with pixel-perfect graphics such as low-res screenshots or eBoy-style pixel art, and you want the detail not to get smeary when you boost or reduce the resolution. In this case, work in increments of 100%.

That should hopefully have given you a basic understanding of the role of DPI and resolution, but I bet you still have questions. Let me guess what they are and try to answer them!

What DPI should my images be at?

For print, 300dpi is usually optimal, but you can get away with less; even 150dpi is often okay for photographic images, though it would be starting to look a bit rubbish for logos and the like. However…

But I thought all images for screen should be at 72 or 96dpi?

DPI is broadly irrelevant for designing images for screen, and not just because 'DPI' is specifically a print concern. Because you'll be presenting a grid of pixels (your image) slotted one by one into another grid of pixels (a screen), 'the size of the pixels', which is what we're talking about when we're talking about DPI, is irrelevant. So in general terms, you just need to care about the pixel dimensions, not the DPI/PPI.

The 72/96dpi thing is a legacy kludge, and you can mostly ignore it, especially with today's high-resolution displays, which have their own problems with creating @2x versions.

There's a wrinkle, though: in some contexts, systems can try to read a DPI value from metadata and be clever about how they present an image, when all you want them to do is just display the pixels 1:1. So, much as it annoys me, I do sometimes manually set the resolution of images destined for web pages to 72dpi.

My printer prints at 4800dpi, though…?

Each pixel on a normal modern computer screen can display one of 16.8 million colours, but when that pixel is printed on, say, an inkjet printer, unless it's pure cyan, magenta, yellow or black, the printer has to recreate what colour it is by placing even tinier dots of pure C, M, Y or K ink within the bounds of that pixel so that our eyes perceive the pixel as the correct colour.

Therefore, the number of actual dots per inch the printer needs to be able to place has to be high – much higher than most of the images you'd send to it – in order that you can create the colours necessary for each pixel. And that's why conflating DPI, PPI and SPI as I did early on is actually a terrible idea, technically. 

Many people do just call all three 'DPI', however – even if Photoshop does correctly call it PPI in its dialogue box – and unless you're getting technical or pedantic, you usually can too. (There's LPI too, but let's not complicate things further.)

So is 'resolution' the pixel dimensions or the DPI (or PPI)?

Uh, either. Sorry. Different people use the term for each, and anyway it depends on context. If you're unsure, clarify.

Related articles:

• The 10 commandments of Photoshop etiquette
• The designer's guide to printing a poster
• Create special print finishes in InDesign

View the full article