Image DPI on the Web

Do you want to understand how image DPI affects images displayed in web pages? Consider this formula:

1 = 1

That's all of the math you'll ever need to understand how an image's DPI (dots per inch) settings will affect how it will be viewed in a web browser. That's because image DPI is irrelevant on the web. That's a bold statement and there seems to be a lot of confusion on the subject. The common misconception is that the higher an image's DPI is, the more detail will be shown. But once the irrelevancies have been stripped away, the reality is as simple as the formula 1=1. Let's see why this is so.

When dealing with JPEG images, we are actually using JPEG File Interchange Format (JFIF). The DPI values we're talking about are referred to in the JFIF specification as pixel density. Here is an example. Below are two versions of a photo of an interesting tree on the island of St. Kitts.

300 Pixels Per Inch 72 Pixels Per Inch
300 DPI Image
File Size: 23,662 bytes		 72 DPI image
File Size: 23,662 bytes

Both images above are 300 pixels wide by 400 pixels high and all of the same settings were used when saving them. The only difference between the two is that the image on the left is 300 pixels per inch and the one on the right is 72 pixels per inch. You should note that the file sizes are exactly the same.

How can that be? Simple. The pixel density is simply a field, or more appropriately, three fields in the header of the JPEG file. One field determines the units of measure and the other two determine the actual density for the X and Y axis. The important part is that, when displayed in a web browser, all three of those values are ignored. When displayed in a web browser, a pixel is a pixel. Period.

Now, if you have trouble wrapping your mind around that, download the images. Each of the images is also a link to that image, so it will be easy for you to save copies of them. If you examine the properties of two files, you'll see that 300dpi.jpg is a 300 DPI image and 72dpi.jpg is a 72 DPI image. If you do a binary comparison of them, you'll see that there are only four bytes different in the two files. Below are the first parts of the two files examined in a hex editor with the bytes that are different highlighted:

300 DPI Binary 300 DPI Image
72 DPI Binary 72 DPI Image

Before we look at the bytes that are different, let's talk about the one byte that immediately precedes them. That byte is indicated by the term Density Units in the above screen grabs. In both files that byte is 01. The Density Units byte will be set to zero if no density is specified. In that case, values for the X and Y density show only the aspect ratio of the image. Otherwise, the Density Units byte is set to 01 for pixels per inch, or 02 for pixels per centimeter. In our case, both are 01, so the pixel density for both images are specified in pixels per inch.

Now, looking at the four bytes that are different, the first two represent the X density and the second two are the Y density. In the 300 DPI image, you have 012C hex, which is 300 for X density and 012C, again 300, for the Y density. For the 72 DPI image, you have 0048 hex, which is 72 for both the X and Y density.

So what's the difference? The difference comes when you use a DPI aware program to print an image. Here's an example of a PhotoShop print preview of the two above images:

Print preview of 300 DPI image
300 DPI Image		 Print preview of 72 DPI image
72 DPI Image

Now, you see a big difference. Both images are 300 pixels wide. When printed at 300 pixels per inch, that results in an image that is one inch wide. When printed at 72 pixels per inch, it results in an image that is 4.167 inches wide. At first glance, that may seem to run counter to what you'd expect. More pixels per inch should result in a higher quality image, right? The problem with that line of thinking is that you're looking at images with the same pixel dimensions. With given pixel dimensions, there is nothing you can do to improve the quality of the image or add detail to it.

On the other hand, if an image is scanned at a higher pixel density, it will contain more detail, but will also result in an image that has greater dimensions. If you scan a photograph that is 8 inches by 10 inches at 72 DPI, the resulting digital image will be 576 pixels by 720 pixels. If you scan that same 8x10 photo at 300 DPI, the image will be 2,400 pixels by 3,000 pixels. The two will both print the same size, but 300 DPI image will contain more detail in its 2,400 x 3,000 pixels and when printed be a much sharper, higher quality image.

That, however, has no bearing on how images will be displayed in a web page. There, we were talking about the original image acquisition. In images of given pixel dimensions the DPI, or pixel density, has no bearing on file size, or how those images will display in a web page. So, as was stated at the beginning of this article, each pixel in the image will be represented by exactly one pixel on the computer screen. 1=1.

Note: If you doubt my conclusions here and would like to check the standard yourself, you can find a copy of it on the Joint Photographic Experts Group (JPEG) web site at http://www.jpeg.org/public/jfif.pdf. If you don't already have programs that allow you to examine files in hex mode, or view the properties of an image, WinVi can examine files in hex mode and IfranView can show image properties. Both programs are free downloads for Windows machines.

Hope that helps clear up some of the confusion.