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.
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.
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. |