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