🎞 The 5-Minute Guide to Image Quality

Answering, once and for all, the difference between resolution, compression, and DPI, so that you can make sure you’re using the right image for the right use.

--

Photo by Steve Roe on Unsplash

At Unsplash, we deal with image quality a lot since that’s basically, you know, the entire premise of our site.

Unsplash photos are used across a lot of different mediums, from tweets, websites, and mobile apps, through to books, billboards, and even VR.

Because of this, we get a lot of questions about image quality.

Everyone wants to make sure they’re using the best quality photo for their project, but there’s a lot of technical terms and misinformation around image quality.

Let’s clear it up.

To understand image quality, you need to understand two main things: resolution and compression. If you understand these two things, you’re golden 🏆

📐 Image Resolution

When we talk about image resolution, we’re talking about pixel resolution.

Pixel resolution is straightforward: a single pixel represents a colour and an image is made up of millions of pixels. Millions of pixels taken together make a pretty picture. Given two versions of an image, more pixels generally means more quality.

Megapixels are calculated by multiplying the number of pixels in each dimension and dividing by one million.

Photo by Hybrid on Unsplash

In 2018, standard digital cameras shoot at an image resolution of 8–30 megapixels (abbreviated MP). If you use an iPhone X, it shoots at 12 MP. If you use a professional DSLR, like a Canon 5D Mark IV, it shoots at up to 30 MP.

Digital images are obviously displayed on digital screens. 🤯

Digital screens, like digital images, are made up of many pixels. A standard laptop is usually between 2 and 5 megapixels (or approximately 1500 to 2500px in width). When you take a large image, like an 18MP photo, and display it on a laptop screen, the image has to be downsized to fit on the screen.

This leads to lesson 1: using an image larger than what you need doesn’t increase the quality of the resulting image.

Therefore, if you’re working in a digital medium and using images, chances are, 2–5MP (or images with a width of 2000px) are as large an image as you’ll likely ever need.

🤖 Compression

Image resolution is only one half of image quality. To understand the other half, requires understanding image compression.

Without getting too technical, image compression is a process to remove file size (note size refers to file ‘weight’, i.e. megabytes, not resolution), while providing a result that looks similar to the original image.

In the simplest sense, compression trades image details for approximations. At light levels of compression, these changes are imperceptible to the human eye. As the level of compression increases, the changes may become more noticeable.

JPEG is the most popular form of image compression. JPEG configures the level of compression with a parameter known as quality, which can take any value from 0 to 100, where 100 applies the minimum amount of image compression and 0 applies the maximum amount of image compression.

Compression matters to the quality of the photo, much in the same way that image resolution matters.

Photo by Jaredd Craig on Unsplash

A highly compressed, high resolution photo, can look bad. A low resolution photo with no compression can also look bad. But a high resolution photo with a reasonable amount of compression applied can look just as good as a high resolution photo with no compression applied.

This leads to lesson 2: if you’re using the image in a website or distributing it to many people, you should use some amount of compression (usually a quality between 70–90 achieves a good balance). If you’re not worried about file size, don’t compress the image.

We do this on Unsplash. When you download a photo, we apply a small amount of compression (a quality of 90). We do this because it results in dramatically smaller file sizes (which means faster downloads and smaller server bills for us), while providing the same quality photo.

😮 DPI doesn’t matter

I’d happily end this article here, but I know that there is a very popular misunderstanding that needs addressing: for all intents and purposes, Dots per inch (DPI) isn’t something you should care about.

About once a day we get an email asking us what DPI Unsplash images are. Then, about once a week, we’ll get an email from someone telling us Unsplash should make all the photos available in 300dpi because it’s much higher quality.

DPI is a property added to the file to relate the dimensions of the image to a theoretical printing size. Unless you have plans on printing the photo, DPI has no importance.

If you do plan on printing the photo, adjusting the DPI won’t create a better quality image either. DPI is best understood as a function of the image resolution and the size of the canvas you plan to print on. If you have a 3000 pixel width image and you plan to print it on a 10 inch wide canvas, your image will be printable at a maximum of 300dpi. If that same image is to be printed on a 100 inch wide canvas, your image will be printable at a maximum of 30dpi. The image will certainly look better up close on the 10 inch canvas, but both canvases will contain exactly the same quality photo.

Lesson 3: don’t worry about the DPI of your images. If you are, you’re most likely confused.

🐙 You can’t increase quality once its lost

One last thing deserves explaining.

If larger resolution images and lower levels of image compression increase the quality of the photo, can you apply these settings to low quality photos to make them high quality?

Unfortunately, decreasing image resolution and increasing image compression are one-way streets. Once you make the change, there’s no going back.

Lesson 4: taking an image of resolution 3MP and scaling it up to 8MP doesn’t increase the quality of the image. Similarly, taking an image that was compressed at a quality of 80 and recompressing it at a quality setting of 100 won’t uncompress the image.

With a good understanding of image resolution and image compression you can make sure to use images with the best quality possible.

If you’ve got any more questions about image quality, or you’d like to discuss my choice of an octopus emoji for my final heading, feel free to hit me up on Twitter at @lukechesser 🐙

Editor for

Cofounder of @unsplash, building the internet’s visual library 🇨🇦