Or 1000 x 1000 144 dpi.” Those two things aren’t equivalent. You did seem to be disputing the math when you said “I would ask for 2000 x 2000 72 dpi. So, that being said, I still stand behind image DPI not mattering on the web - especially when the most common save for web functionality (in Photoshop and likely lots of other apps and image optimizers) will discard that information no matter what number you put in, and since websites are meant to be viewed on screens, not printed out. Macs and PCs haven’t been 72 and 96 DPI, respectively, since the 90s – you can check out which will show you the DPI of many current screens. There’s no reason anyone would want to do that normally, unless they were illustrating a point like I was. To save those kitten images, I had to avoid using Photoshop’s Save for Web functionality (which discards the DPI info entirely, and defaults to 72 the next time you open the file), and save the JPGs the old fashioned, non-optimized way. You’re right that the pictures do have different file sizes! However, you really have to go out of your way to create an image with a high DPI for the web. Unless you’re using a vector format like SVG, in which case, high five. If in doubt, remember that on the web, it’s all about the pixels. The DPI/PPI setting in Photoshop is still irrelevant because you’re not printing it out. Then, when that image is presented at 300px as originally intended, it’ll look nice and crisp on retina screens since the image has double the number of pixels and so does the screen. So, a logo that’s 300px across normally should be saved at 600px. All you really need to know is that if you’re optimizing for a retina display that’s squishing double the number of pixels into the same area as a non-retina display would, you need to double the pixels in your image so it still appears crisp. So doesn’t image DPI matter now? Doesn’t it? This means that each individual pixel is even smaller so you get a much sharper image than on a standard screen. Glad you asked! Retina displays, also known as “high DPI” displays, are awesome in that they cram more pixels into their screens than standard displays. Your designer/developer should tell you something like “please make sure that images for this particular section of your website are X pixels wide.” The target size of your image is determined by the size of the container it needs to fill, and that measurement is different from website to website (or even in different parts of the same website), so the person who created your website (or your theme documentation, if you’re using a pre-made theme) will be able to tell you what size you should be aiming for.
To determine how big an image should be on your website, you have to know what size in pixels it needs to fill. Pixels are all you ever need to think about. Look back up again at the three original kitties – their size doesn’t change at all on your screen, because your screen understands one measurement: pixels. So, how does this relate to the web, again? One is at 72 DPI, one is at 300 DPI, and one is at 1000 DPI:Īhhh, so image DPI does matter… but only if you’re printing it out. Now, let me show you three images from Placekitten, aka the best site ever.
Let’s think of them interchangeably for our purposes. They’re quite similar, and people often use them interchangeably, which is a little confusing, so don’t worry about it for now. The term DPI is generally used for printed images since printed images are made up of tiny dots, while the term PPI is mostly used for screens, since screens contain pixels. If you’re sitting here thinking “WTF is DPI?” or “Is DPI the same as PPI?” or “Why, oh why, are there so many acronyms in the world?”, DPI stands for “dots per inch”, and PPI stands for “pixels per inch”. Friends, I’m here to put the 72 DPI myth to rest. As in, “images for the web should be 72 DPI while images for print should be at least 300 DPI”. If you’ve ever had to communicate with someone about creating/resizing images for the web, I’ll bet you’ve heard a lot about “72 DPI”.