Does DPI (dots-per-inch) Matter for Website Images? No, and Here's Why...

People always wonder what DPI (dots-per-inch) a web image should be at. This is a trick question as DPI has no bearing on the web. DPI is strictly about print media. It will make a great difference if you are printing a picture, but not in the least if using that image for a website.

What does matter is PPI (pixels-per-inch). Everything on the web is measured in pixels.

An example of when this may seem untrue is as follows:

Someone may state, "I have a 27" monitor, and so does my friend, but when we visit the same webpage the images there are smaller on my monitor than on his, or vice-versa. Wouldn't this have to do with DPI?"

No. Why? Because you can have a same-sized monitor at different resolutions, which are measured in pixels. So if one monitor is at 800x600 pixels, and the other is at 1280x800 pixels, then of course the images will look different in size. If the monitors were set at the same resolution, then they would look the same on both monitors.

There is a more in-depth explanation on why this happens with this excellent article written by Ben Grimillion here: http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

The main point is to pay attention to resampling (PPI) and resizing (DPI).

I decided to test this myself to be absolutely sure. Those of you with Adobe Photoshop can do this easily. If you do not have Photoshop there is a powerful, free alternative called Paint from paint.net that will allow you to test this as well.

The goal here is to save an image at different DPIs to see if there is a dimension-size difference.

NOTE: There will be a file size difference as well since an image will try to keep retain the DPI information since it does not know that you are not using it for print. Formats such as GIF or PNG supposedly disregard DPI, but will default to 72DPI if ever used for print.

*If using Photoshop, be sure to change the DPI first, and then change the pixel dimensions. I noticed that if I did it the opposite way, the pixel dimensions will change according to the DPI, but not if doing it the other way around.

*If using Paint, you can just change the DPI as the pixel dimensions won't change automatically.

Photoshop: Go to Image > Image Size...

Paint: Go to Image > Resize...

Here is the example I did when testing:

Can you guess which one is at 72DPI and which one is at 1.1DPI? Hover over and find out!