DPI Means Nothing On the Web

This is a bit of a pet peeve of mine. I’ve seen many people get terribly confused by the way scanning programs, and some image manipulation programs, associate a DPI with bitmap images. I find it particularly confusing in scanner interfaces, myself.

The real information in a bitmap image file is the pixels. The number of pixels in the file, the color depth, and any compression parameters between them determine how big the file will be on disk. The number of pixels in the file determine how it will display in a web browser.

Note: In the HTML <IMG> tag, you can specify the dimension of the image to display in pixels, and most browsers will then distort the actual image to those dimensions. This makes the last sentence above technically not completely true. However, note that this exception doesn’t depend on the DPI either.

Note that the DPI didn’t appear anywhere in determining the file size. That’s because all it is is a field in the file header, to record what the DPI claims to be.

Print and layout programs will, I believe, attempt to scale a graphics image to the size implied by the DPI when inserting it into a document for printing. The details of this vary considerably by program, and there’s generally a way to override them. This is beyond the scope of this document, which is talking about the web only.

As final proof, look at the following three images:

2 dpi example 100 dpi example 2700 dpi example
2 DPI 100 DPI 2700 DPI

Do they look different to you? Now save them and examine their characteristics in your image editing program. You’ll find that they have the same pixel dimensions, and very different DPI values (as indicated). Yet they look the same on the web, and they’re the same size files.


Leave a Reply