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?
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.