When it comes to resizing images or creating photos for the web, a lot of people talk about about having it “set to 72 DPI”. They are saying that images for the web should be 72 DPI, compared to images needed for printing which should be 300 DPI”.
Hopefully the following information will put the 72 DPI myth to rest. But I know a lot of you are asking “What is this thing called DPI?” and “What about the thing called PPI?”.
DPI stands for ‘dots-per-inch’ while PPI stands for ‘pixels-per-inch’. Generally, the term DPI is used for printed images and the term PPI is used for screens. In some ways they are fairly similar and a lot of people use them interchangeably, which in turn does cause some confusion.
The size of an image in a web layout is very important. The proper alignment, getting the right amount of white space, as well as sizing photos and graphics beforehand are all important factors in creating a balanced look.
If someone is talking about a web image and says, for example, that it’s 75mm (or 3 old-school inches) wide, they’re thinking about how it would appear on their own screen. That image will most probably appear larger or smaller on different monitors if the image’s pixel dimensions were not changed and would even look different on the same monitor at a different resolution setting.
So the image DPI really matters… but it only matters if you’re printing it out.
In print, dots per inch impact the size of an image on a page. DPI doesn’t apply to the web. The images on the web are measured in pixels.
The question now is, how does this relate to the web?
The answer is – it doesn’t. DPI has no bearing on the web. What does matter is PPI (pixels-per-inch). When you have three images on your screen, their size doesn’t change at all, it’s because your screen only understands one measurement which is the PIXELS. This is what you only need and think about. In determining how big an image should be on your web, you need to know the size in pixels – just pixels.
You may have another question in mind about retina displays. Let’s provide a quick explanation of these. Retina displays, also known as ‘high DPI’ displays, are great in so far as they squeeze more pixels into their screens than standard displays. Meaning, each individual pixel is even smaller, therefore you get much sharper image than on a standard screen.
So now, if you’re going to optimize for a retina display, you need to double the pixels in your image so that it will still appear sharp and crisp. For example an image that is 300px wide should be saved at 600px so that when that image is presented in 300px as intended originally, it will look nice and crisp on retina screens because the image has doubled the number of pixels. Therefore, the screen display will be the same. In Photoshop or other software program for editing images, the setting for DPI and PPI are both irrelevant because you are not printing it out.
Put simply, always remember that on the web it is all about PIXELS.