Everything You Need to Know About Image Resolution | Beef Up Your Brand

Image resolution is a topic that often leaves people scratching their heads. In this post we’re telling you everything you need to know about image resolution, to unravel some of the confusion around the tricky topic of image resolution and help you ensure your images are looking as sharp as ever.

The examples below are in reference to Adobe Photoshop.

What are pixels?

Images can be as either vector or raster, depending on how they present information.

Raster images, also known as bitmap, are pixel-based, which means the image is made up of a grid of tiny coloured squares, coming together to form a picture. Each little square is called a ‘pixel’ and you can observe these if you zoom far enough into any raster image. Raster images are used to show complex images that have a range of smooth gradients and undefined edges, such as photographs. Raster file formats are jpg, png, gif and psd.

Vector graphics are based on mathematical calculations, allowing them to be scaled both up and down without any loss of quality. Image resolution doesn’t really apply to these images.

What is DPI?

Dpi stands for ‘dots-per-inch‘ and is used in printing to describe the number of dots laid down on paper per square inch – in an image with a resolution of 10dpi, each square inch will be made up for ten smaller squares called pixels. Confusingly dpi is regularly used as the de facto industry term for anything relating to a certain number of units per inch, so you may also come across ppi (pixels per inch) in digital work, spi (samples per inch) for scanners or lpi (lines per inch) in printing, but these are terms that people rarely refer to.

Image size

You might think a higher resolution means a sharper image, right? If all images were the same size then this might be true – but they aren’t, they come in all shapes and sizes. The quality of an image all depends on the relationship between the amount of pixels and image size – change one and the other changes with it. 

The number of pixels in an image is fixed, so changing the physical size of the image will change the number of pixels-per-inch. Increasing the image size will result in a lower dpi, meaning there are fewer pixels to make up each square inch and the pixels will become larger to fill the space. The resulting image could end up looking pixellated or blocky. In general, you can make an image smaller without creating any issues, whereas increasing image size can have bad effects on the end result.

Interpolation

In the previous sections, we made the assumption that the number of pixels is fixed and can’t be changed. This isn’t strictly true because extra pixels can be artificially created through a process called ‘interpolation’, where the computer analyses the original pixels and creates new ones based on what it thinks would be there. For example, if you had a blue pixel sitting next to a yellow pixel and wanted to artificially increase the dpi of your image, the computer would use interpolation to add a green pixel in between the two.

Interpolation effectively allows you to increase the size of the image, while retaining the same dpi, thus avoiding any pixellation issues. This may sound like the perfect solution in theory, however it is unreasonable to expect a computer to produce a perfectly accurate estimation of the missing pixels and this process should be used sparingly.

Resampling

Resampling will change the pixel dimensions, using interpolation, by adding or deleting pixels. You can toggle this on and off using the checkbox at the bottom of the Image Size box. With Resampling turned on, you can set a new resolution without the image size changing (or vice-versa) and Photoshop will fill in the missing pixels. Constrain Proportions will mean that the width and height remain at a fixed ratio, removing the risk of squishing or distorting your image.

There are various methods for resampling in the drop-down menu, beside the checkbox. If you’re unsure which is correct for you, then Automatic is a good option. Two are clearly marked for reduction and enlargement; Bicubic Sharper and Bicubic Smoother. Nearest Neighbour is the only one not to use interpolation, so should only be used on pixel-perfect images, such as low-res images or pixel art, where you don’t want the detail to get smeary.

Resampling should, as a rule, be avoided where possible, since you can lose clarity and sharpness in the image. You can still use Undo, but it can be useful to keep a copy of the original image, in case you accidentally save a low-res version and lose all that detail.

Print vs digital mediums

When sending something to print, it is recommended to use a resolution of 300dpi, but depending on the quality of the image and the size you’re printing to, you can often get away with using a lower dpi. An A3 photographic image may look fine with a resolution of 150dpi.

When it comes to digital, people are often under the impression that the resolution should be set to 72dpi, but this is only a legacy value and it is image dimensions that are more important, because you are fitting a grid of pixels (your image) into a grid of pixels (the screen). A 500px x 500px image will always be 500px x 500px, no matter what the pixel density is.

Now you know everything you need to know about image resolution, why not get in touch today to explore how we can beef up your brand!

Callum Huett

Web, Motion & Graphic Designer