Resolution, dpi and ppi

This page tries to sort things out regarding image resolution and busts the myth and concept of 72 dpi.

Images for web and printing

The images to the left are all in the size of 400x300 pixels. Their resolution however, is different from each other. They are saved in 100, 300 and 72 ppi respectively. (ppi = pixels per inch, not to be confused with dpi, dots per inch, that only deals with printer resolution. In common language however, the notion of dpi is [wrongly] used interchangeably).

Images are the same size

As you can see the images are the same size on screen. That's because they are the same size, namely 400x300 pixels.

(The text on the images is in Swedish, but it just says "This image is 400x300 pixels. The resolution is 100/300/72 ppi".)

Print the webpage

If you print this page the images will be the same size. Images that are put up on a web page are printed without regard to resolution. In Windows the OS assumes that the image has a resolution of 96 ppi and on Mac (I believe) 72 ppi. (Consequently the images should print larger from a Mac than a PC. Not tested by me.)

Here is a link to a page with the images only. They cover about one page in letter or A4 format on PC.

Print the images separately

If you instead save the images to your computer (right-click the image and select "Save image to..." in the context menu) and then open it in your image-editing program and print them from there – what will happen then? Well, test it and you will see. (Print original size, do not select "fit to page".) At the same time, while you have the images open you can theck their resolution just to see it's correct according to how they are labeled.

If you think this is too much work or you don't have access to a printer, the answer is displayed at the bottom of the page*.

Conclusion

What can we conclude when it comes to images and resolution? Well, on the web image resolution doesn't matter. Not even if the page is to be printed. You can save the image in 300, 100, 96, 72, 27 or 3000 ppi, it doesn't matter. The images will print the same size if on a web page. The only case when resolution matters is when you save the image to disk and print it from your image editor. Not even if the image is linked "loose" (not embedded on a web page) and you will print it from your browser, does it matter. It will still print the same way, like as if it was put on a web page.

What resolution should you save in?

Then the question arises of what resolution to choose when saving an image for the web. You got to choose something. Well, I recommend 100 ppi, since this is the resolution most monitors have today. (Dot pitch is usually around .25 mm and 1 inch is about 25 mm). Then the image will print about the same size as seen on the monitor. Older monitors might have a bit lower resolution, 96 ppi is rather common, you then have a dot pitch of .26 mm.

Screen resolution in ppi

Calculating the resolution of your monitor screen is easy. Just get a ruler and measure the width of the monitor screen. If you have a centimeter-graded ruler, divide the number by 2.5 and you get the width in inches. Then divide the screen resolution with the number of inches. Example: a 22" monitor has a 40 cm wide screen and the resolution is 1600x1200 pixels. 40 divided by 2.5 gives you 16 inches and 1600 (pixels wide) divided by 16 (screen width in inches) = 100 ppi.

Where does 72 dpi come from?

The myth and notion of 72 dpi probably stems from an age when you scanned images from film or copies. People that were used to think of image sizes in cm or inches rather than in pixels knew that when you were about to scan an image for print, a resolution of 300 ppi was needed to get a good sharpness and detail in magazine print (under the premise that the original contains detail enough).

For those used to think in cm and ppi (dpi) it was probably a natural thing to keep thinking this way even if the images now were destined for the screen. If you wanted the image to show at 10x15 cm on screen, you had to know the resolution (pixel density) of monitor screens (se above). Early Mac monitors had a resolution of about 72 pixels per inch, hence 72 dpi.

Of course it is wrong to think in centimeters or inches when it comes to the web. On the web the only unit is pixels, and pixel density (resolution) varies between different monitor models. An image that displays 15 cm wide on a screen with 72 ppi will only show at 10.8 cm on a 100 ppi screen. Forget about centimeters or inches when preparing images for webb. Think in pixels and nothing else. Different users have different monitors. Of course you have to take into account that the image should fit on the screen, but think in pixels, not in centimeters or inches. Normally an image is shown in a context on a web page and you then have to see how much space (in pixels) that is available.

Only jpeg stores resolution data

Finally I just want to mention that regarding file formats for the web, jpeg is the only format that stores resolution data in the file. The gif format does not have such resolution data storage and it will be printed with the standard resolution of the operative system. The images to the left consequently are jpegs, even if they would have looked better as gifs.

More reading

This is an area where confusion has reigned for a long time, and still does to a certain extent. If you ant to get even more convinced about this subject, then take a look at: http://www.scantips.com/no72dpi.html.

Regards Lars Forslin

To the start page of this site (Swedish)


*What happens when you print the images?

  • The image in 100 ppi will print 10 cm wide ([400/100] x 2,5)
  • The image in 300 ppi will print 3,3 cm wide ([400/300] x 2,5)
  • The image in 72 ppi will print 13,9 cm wide ([400/72] x 2,5)

(We can here see that if printed from an image editor, the image saved in 100 ppi best represent the size on your monitor, that usually has the same resolution. 19" LCD monitors with screen size 1280x1024 usually has a bit lower resolution and 17" monitors with the same screen size thus are sharper because the pixels are placed more closely together.)

The value of 2.5 stems from the fact that 1 inch = 2.5 cm. ppi means pixels per inch. Converted to centimeters the figures we have discussed are the following:

  • 100 ppi = 40 pixels per centimeter
  • 300 ppi = 120 pixels per centimeter
  • 72 ppi = 29 pixels per centimeter.