DPI & PPI are irrelevant, only pixel dimensions matter on your website

When uploading images to their website, photographers are often worried about what DPI to use for their images.

This is a very common misconception, and this article is meant to clarify this once and for all: DPI doesn’t matter on the web, it’s just a text field acting as an instruction for the printing process. Only the actual pixel dimensions are important.

Let’s clarify this once and for all:
only pixel dimensions matter on the web

The entire digital photography workflow is based on pixels:

• The DSLR camera senzor has pixels
• The image file saved on the camera’s memory card is in pixels. The manufacturers advertise “mega-pixels” as well, the total number of pixels in an image.
• When importing into your editing software (like Lightroom), that works on a pixel level as well.
• When you upload images to your website, browsers display them based on their pixel dimensions. Everything on the web is measured in pixels, not in real-world distance units.

And if you’re scanning old photos, the DPI setting there simply tells the scanner to create X amount of pixels for each inch of paper, it all gets “translated” to pixels again.

The only time when DPI/PPI comes into play is at the printer level: the printer needs to decide how many of the image’s pixels to be printed per physical paper size unit (the standard being inches).

DPI is therefore just a text field saved in the image metadata (like the other IPTC and EXIF values), instructing the printer how many pixels-per-inch to print. The higher the value, the higher quality print you’ll get.

So DPI is just a recommendation in the image metadata. When printing the image, you are free to over-ride it and print at a different DPI. With the same image source, you might need to create a small 10×15 print, a wall calendar, or a giant billboard. Those are all different DPI values basically.

But on the web, DPI is ignored.

Notice how setting different DPI values (72, 300, 9999) to this image does not change the file size at all, no photographic information is changed at all.

Examples of (erroneous) questions from photographers:

• “Do I need to upload 300 dpi versions of all my photos?”
• “Should I convert the JPG files to 72 DPI?”
• “For retina displays, do I need to set the DPI to double?”
• “Often if I go with the regular 72dpi for anything web-based at the size I want, it ends up looking pixelated on my high res screen, so now, I just go for ‘larger than I think it needs to be’ to ensure a crisp look on those retina displays.”
• “My images are 1500 pixels at their largest dimension, 72 dpi and saved at 6 quality jpg, is that OK?”
• “I uploaded them as 1200px in length 72 dpi for quick loading… is this size good?”
• “What DPI should I use for images on the website?”

Where does the confusion come from?

Adobe Photoshop’s “Image Size” dialog can sometimes be confusing:

With the “Resample” option enabled, changing the PPI from 72 to 300 increases the pixel dimensions from 2760×2070 to 11500×8625 using resampling. That’s not actually improving the image quality (quite the opposite), it’s just stretching the image dimensions with the existing pixel information. Resampling is not a solution since it’s still connected to the native resolution. 

If you disable the “Resample” option, changing the PPI has no effect on the pixel dimensions (2760×2070), it’s simply telling you how many inches the images will have when printed at that resolution. No changes are done to the actual image quality, it’s just setting the PPI field in the metadata.

But you’ll notice that Photoshop’s Export dialog (which specifically generates images for the web) only works in pixels, with no sight of DPI/PPI settings:

For the purposes of this article, I’m be using DPI and PPI interchangeably. I know they’re completely different, but many photographers mix them up and they’re both irrelevant for the web.

What if you’re selling prints?

Again, only pixel dimensions matter. The larger your images are, the larger the prints you can get at a specific DPI.

For example, to maintain a 300-dpi quality level when printing, a 12PM image at 4032 x 3024 pixels can be printed at 13.44 by 10.08 inches (~ 32 by 25 cm).

If you print the 3 images above (in DPI-aware software) you get different sizes on the page:

And even then, you can manually scale the image as needed for the print, basically ignoring the embedded PPI value:

Further reading

• How to optimize images for website performance: image sizes, compression, tools & testing
• The Myth of DPI
• Image DPI on the Web
• Pixels per inch is just a tag
• 72 DPI…Why?

Conclusion

With everything related to your photography website, only image pixel dimensions matter. You can ignore DPI/PPI, that’s just a piece of metadata, only relevant for printing and scanning.

And if you’re selling prints, you can set the DPI value to any value you’re comfortable with (like 300), which acts as the default quality level people can print them at (though they can always change it as needed).