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

6 Responses


  • Kris says:

    If I have an image of 200px*300px and store it at 72PPI it will be significantly smaller, and load faster than when I store it at 300PPI. So doesn’t the PPI matter when it comes to performance?

    • Lukasz says:

      It will be exactly the same size!! The size of file depends on many pixels a image have (and compresion used). DPI and PPI are “completely meaningless” for file size or quality.

  • Terry says:

    Being web people, they don’t think about image size like print designers. So I see why they feel it’s so incredible that print designers can’t fathom why DPI doesn’t matter. They don’t realize that print designers don’t solely think in DPI. They think in dimensions AND DPI. You can’t hand a print designer a 300 dpi file and assume it’s high-res (print-ready) because it depends on what dimensions the image will be used at. You have to have both DPI and dimensions to tell if it’s usable.

    To a print designer:
    A 1”x1” file can be 72 dpi, 300 dpi, 1000 dpi, etc. It’s still a 1” x 1” file.

    To a web designer:
    The above is 3 different files.
    72px X 72px
    300px X 300px
    1000px X 1000px

    To a print designer:
    The above 3 different files are seen as:
    .24” X .24” @ 300 dpi
    1” x 1” @ 300 dpi
    3.333” X 3.333” @ 300 dpi

    All of these articles would be better off telling the print designer that there is no such thing as an inch (mm, cm, etc.) on the web. And because there are no inches on the web, PPI/DPI (pixels/dots per inch) is not a web graphic term. So it’s never a difference between print and web— DPI and PPI—both are print terms because they involve inches.

    Better to explain to a print designer that images don’t have physical dimensions (that you can put a ruler to) on the web. On the web you have a pixel, not a pixel per inch, and that pixel is a unit without a standardized physical measurement. Because of this, you can never make a picture “better” by adding more pixels/dots. There is no unit of measure to put more into.

  • I’ve thought this for years. But I’ve just found that it actually DOES matter in terms of how Outlook reads an email image. Outlook must be able to see the metadata of PPI and then it makes adjustments to a background image based on that. So if an image that is 600×400 pixels and saved at 150 ppi, it will tile it across a background vs having that same image 600x400px image saved at 96ppi. That one will just fill the background area that is set to the same dimensions.
    Of course it’s Microsoft where we find this issue. :O So clever.
    This issue just tripped me up for 5 hours while my emails weren’t rendering correctly until I changed the dpi or used the legacy save as web in PSD.

    • Fred Meyer says:

      There’s always an exception, as long as Microsoft’s around. 🙂

      // Maybe deprecated after end of IE?
      // Update: nevermind, still use
      function microsoft() {

Add a Comment

Your email address will not be published.