Optimizing Resolution

An image file's resolution determines the size of its pixels: the higher the resolution, the smaller the pixels and therefore the sharper the image. The more pixels you have, however, the heavier the image becomes, and the longer it takes to download.

In the world of print graphics, higher resolution is almost always better than lower resolution. But in Web graphics, the display capability of monitor screens puts a tight constraint on image resolution. Windows monitors display at 96 ppi (pixels per inch), which is actually fairly low-res. Macintosh monitors are even lower, at 72 ppi. In the spirit of cross-platform compatibility, the resolution of 72 ppi has emerged as the standard for Web images, even though the vast majority of monitors can display at the slightly higher benchmark of 96 ppi.

GEEKSPEAK

The resolution of an image file determines the size of its pixels: the higher the resolution, the smaller the pixels and the sharper the image.

What that means is this: Higher-resolution images look no better on screen than 72- or 96-ppi images. If your Web images are print-quality, say 300 or 600 ppi, all that additional clarity is dead weight. Your visitors see no difference whatsoever on screen, as Figure 28.1 shows. Why force them to download high-res images when faster-loading, low-res images work just as well?

Figure 28.1. The image on the left has a resolution of 600 ppi, while the image on the right has a resolution of 72 ppimore than eight times lower. However, both look exactly the same on screen, since monitors are relatively low-res output devices.

FAQ

Why do optimized Web images look grainy when I print them out?

On screen, 72 ppi looks crisp and clear, but that's because monitors are fairly low-res output devices. Good old low-tech paper is actually a much higher-res output device. You can cram more dots into the same amount of space on the printed page, so lower-res images show their graininess more readily.

TIP

Images that you specifically intend for your visitors to print out should be optimized for print instead of the screen. But not everyone who visits your site will print out these images. To improve the performance of your site, don't build the high-res images into your pages. Use low-res, screen-optimized images instead, and include links to high-res, print-quality images for those who want them. The high-res images won't look any different on screen, but they'll translate much better to print than their low-res counterparts will.

In your graphics software, reduce all Web images to the standard resolution of 72 ppi. This is the easiest and most effective technique for optimizing images for monitor output.