It is widely thought that all web graphics need to be set to 72ppi (sometimes confused with dpi) because this is “web resolution”. But if you’re only going to look at an image on a screen, its PPI doesn’t matter because the PPI of your monitor is already fixed. Look at the example below:
As you can see both these images are 300×300 pixels in size, the first is set to 10ppi and the second is set to 300ppi. On screen they are identical as they are both 300×300, their file size is also identical – so the actual images ppi makes not difference when the image is to be only viewed on screen.
Now when you want to download the image and print it out the ppi comes into play. Here are the print previews of both images onto A4 paper:
If you set the PPI to 10, this is going to make the print out relatively large: at 10 pixels per inch, it will be 30 x 30 inches (300 divided by 10 is 30). If you set the PPI to 300, this is going to make the print out relatively small: at 300 pixels per inch, it will by 1 x 1 inches (300 divided by 300 is 1).
Think of the PPI input as a way to adjust the physical size, not the resolution, of the eventual print-out.
Decreasing the PPI, thus increasing the size of the printout, may seem to produce a lower quality image because the pixels are larger and more visible. But remember, this is only a relative gauge of quality; if you were to stand further away, the image would appear as clear as it did before. The absolute resolution of the image has not changed; there are still as many “pixels” relative to the picture as there were before. So the way to increase the resolution of an image is to produce an image with more pixels, not increase the PPI. But simply re-sampling an image at a higher number of pixels (inputting a new number into the pixels field after the image is already made) is generally not a great way to go about increasing quality, because the computer will likely cram the image full of pixels in weird places. The computer will be inventing colour information that was not originally there so this is when you end up with a pixelated/blurred image. So remember you only can make images smaller and retaining the quality of printed output.
So next time someone tells you to upload images to a website at 72ppi because that is “web resolution,” you can tell them that they have simply added a ridiculous extra step. Unless they are concerned with visitors taking the images from the website and then printing them, the PPI doesn’t matter. A 72ppi image and a 3,000ppi image will appear exactly the same on screen.
See all other articles in our design guides.