Lecture Notes: Photo resolution

Lecture Notes Menu | Main Menu

Here's David, the grandson of a friend. The file for this image has a resolution of 72 dpi and a file size of 13 Kb. The original file, which I received as an attachment to email, has a resolution of 300 dpi and a file size of 111 Kb. I used image-editing software to change the resolution from 300 dpi to 72 dpi, while keeping the same image size of 3.9 inches x 5.8 inches.

Here I've used the image-editing software to select the most important part of the photo, then copied, and pasted it into a new file. The new file size is 5 Kb. The original file has a download time of about 30 seconds via 56k modem. This new file downloads in less than 3 seconds.

If I print the original 300-dpi file from the image-editing software, it will be 3.9 inches by 5.8 inches. But, because the computer monitor displays one dot per pixel, the 300-dpi file requires 1164 x 1728 pixels to display in the monitor. In contrast, the 72-dpi file displays in 279 x 415 pixels.

You can force the browser to display the 300-dpi version in a space that is 279 x 415, and it may (or may not) look OK, but the file size is still 111 Kb. Take a look at what the 300-dpi file looks like in both 1164 x 1728 and 279 x 415 format.

The size of the image in inches on a monitor will vary as the monitor resolution is changed. At 640 x 480 the image will be larger than it will at 1024 x 768. The image will also display larger on a 17 inch monitor than on a 14 inch monitor at the same monitor resolution.

Both the 72-dpi file and the 300-dpi file will print the same size -- 3.9 inches x 5.8 inches -- from image-editing software, because printer resolution is typically 600 dpi or higher. The printed 300-dpi file will be much sharper than the printed 72-dpi file, because of the printer's ability to use all of the data supplied by each file.

Printing the images from a browser window will give different image sizes that approximate what you see on the monitor, but are different from the size of the same images printed from image-editing software.

Another technique to use when you want a fast initial download, but also want the option of displaying a larger image with more detail, is to make a thumbnail of the image and link it to a larger version of the image on a different page. The initial download is quick, and the visitor controls whether the larger image files get downloaded or not. For a consistent look, make the smaller dimension on every thumbnail one inch in your image editing software.

Click a thumbnail image to see its larger version. The file size of the larger image is shown below each thumbnail.

Thumbnail is 6 Kb Delegation (150 dpi, 115 Kb)

Thumbnail is 3 Kb Terracotta soldiers (72 dpi, 63 Kb)

Thumbnail is 4 Kb Tourists (150 dpi, 92 Kb)