Why DPI Doesn’t Matter for Web Images
If you or your client is working with web images and wondering about web image DPI guidelines, this article’s for you. It explains why DPI doesn’t matter for web images, and why pixel count does.
When we say “DPI doesn’t matter on the web,” we don’t mean “it’s not that important”; rather, we mean “it’s completely meaningless”—like asking about your car’s favorite color. Image resolution online is a function of the pixel count of the image, the size of the space it’s being used in, and the display resolution of the device it’s being viewed on, and of those variables only pixel count is a property of the image itself.
Image resolution online is a function of the pixel count of the image, the size of the space it’s being used for, and the display resolution of the device it’s being viewed on. Of those variables, only pixel count is a property of the image itself.
So what does matter on the web is pixel count. “This image is 72 DPI” tells me nothing as someone who might want to use it on a website. “This image is 2000px by 1000px” tells me everything I need to know about whether it’s large enough to look good if we use it in whatever space we’re considering it for.
The article also answers common questions like:
- Does DPI still not matter for how web images display on “high-DPI”/”high-PPI”/”retina” devices? (Correct, it still doesn’t matter, only pixel count does.)
- Then how do we change an image’s resolution online? (“Retina” and other high-resolution devices cram more pixels into the same space if they’re allowed to, for example displaying all 1 million pixels of a 1000px-by-1000px image inside only a 500px-by-500px space. So the thing that allows for high-resolution images online is still the images’ pixel count, relative to the size of the space they’re being shown in.)
- How are DPI and PPI different? (They’re similar—dots per inch and pixels per inch—and are relevant to physically printing things and building device screens, respectively. Neither is relevant to web images.)
- So are rules of thumb like “images for the web should be 72 DPI while images for print should be at least 300 DPI” not valid, then? (Print DPI guidelines do matter, but any sort of “web image DPI guidelines” definitely aren’t valid because DPI is meaningless on the web.)
I Googled up this article just to make sure I wasn’t going crazy, after the second client in under a month asked me about DPI for web images. Really well-written and comprehensive. Kudos to the author!
If you want to know a lot more about how to work with images, and image sizes, in WordPress, we have a comprehensive article on the topic.
Image credit: Maxime De Ruyck