Myth: 72dpi for Web Images

Every time I read articles or tutorials about saving images for Web pages or sending through e-mail they always mention saving the images with a resolution of 72dpi or Dots Per Inch. The interesting fact about this suggestion is that a computer monitor doesn’t deal with dots or inches, but rather with pixels.

The resolution of a monitor is indicated as two numbers: [number of pixels for width]x[number of pixels for height]. For example, resolutions are indicated as 800×600 or 1024×768. You notice no mention of dots or inches because a monitor only cares about the number of pixels. This means that when creating images for viewing on a monitor it is important to pay close attention to the size of the file in pixels.

Let’s see an example of how this works. Below you will see two images from the same image. The top image has a print resolution of 300dpi, while the bottom one has a resolution of 10dpi. You will notice that when displayed on the monitor, they are identical. With regards to monitors, both are the same size: 225×300.

A 225×300 pixel image will always be displayed as 225 by 300 pixels regardless of the screen size in inches.

Summary

Unlike printing, DPI as no affect on how an image is displayed on a computer monitor. When resizing an image for Web sites or e-mails it is important to resize the image based on the number of pixels, and not DPI.

6 Responses to “Myth: 72dpi for Web Images”

  1. Ian Garrett says:

    The 72 comes from typography and points, which are 1/72 of an inch. So 72 points, or dots, would be an inch of dots. It was to correlate the size of the font on screen to the size of the font on the printed page and older displays were designed to work with the 72 ppi size to make the screen to print transition easier.

    It is now fairly meaningless in terms of real size, and just refers to a logical size for that transition and is even more about font reproduction than images now. They end up next to each other a lot so hypothetically, this logical size would mean that if you were to have a 12pt font, it would appear to be 1/6 of an inch tall (1 pica) and so it was that a “72 dpi” image next to it would have the same appearance on you screen as when you printed it out.

    This means nothing anymore though. Just persistent conventions of digital typography printing conversions.

  2. swag says:

    72 dpi for web images is mentioned in those tutorials for good reason.
    back in the day of dialup and stingy storage alotments, the 72 dpi was recommended because the standard 4:3 crt monitor was pretty much incapable of displaying greater image resolutions than 72 dpi. I’m unsure as to who decided that would be the cut-off point, but in a world of web design greater dpi was needless weight added to the file size. 72dpi at whatever size was more compact and just as clear as a 300dpi image of the same size. It was (and still is) about economy and low bandwidth.

    • Paul Salmon says:

      In reality, a 72 dpi image that is 300×300 pixels will look exactly the same as a 300 dpi image that is also 300×300 pixels. The reason? DPI has absolutely zero effect on images that are displayed on a monitor.

  3. Paul says:

    There is a huge difference only when printed. When displayed on a monitor, PPI means nothing. The number of pixels, regardless of how many per inch is everything. The reason is simple. Say you have a 20″ monitor. That would mean a resolution of about 1440×900 is 72 ppi. Many 20″ monitors aren’t that resolution, meaning they can have a higher or lower resolution, meaning that there are more or less than 72 ppi.

    So on monitors, there is absolutely no difference between a 300 ppi or 10 ppi image if they both have the same number of pixels.

  4. TED says:

    DPI only refers to printers. These images look the same because they are the same. They are both 72 pixels per inch (PPI). There is a huge difference between two pictures that are 300 PPI and 10 PPI. Many people say DPI when they mean PPI.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.