WEB DESIGN GARAGE [Electronic resources] نسخه متنی

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.

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?

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.

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.