Optimizing Graphics

Reducing the size of graphics images is a great way to increase the overall friendliness of a Web page. A page with well-optimized graphics is friendlier in at least three respects:

• Bandwidth-friendly (smaller images = less traffic across the Internet)
• Server-friendly (smaller images = less work for the server to transmit)
• Reader-friendly (smaller images = pages load more quickly)

Depending on the image(s) involved and the techniques used, it's really fairly easy to reduce the size of graphics files by at least 50% without perceptibly affecting image quality. Savings of 75% and more are not uncommon.

There are actually already several good references already on the Web about optimizing graphics. So why is ATW slapping up another one? Because most of the existing references on graphics optimization are either:

• So highly technical as to be nearly incomprehensible
• Centered on very expensive, high-end image editing software
• (E) All of the above

It's possible to understand the basic "how-to" of graphics optimization without getting bogged down in extended discussions of "dithering" and "adaptive color palettes." And it's possible to optimize graphics without investing hundreds of dollars in high-end image-editing software.

Understanding Image Formats

The vast majority of images on the Web come in two flavors: JPEG and GIF. Both of these formats are self-compressing, and both are platform-independent, which makes them ideal for exchanging images between

Web clients and servers.
So Which Format Is Better?
It's inevitable.

As soon as the discussion turns to graphics file formats, a partisan supporter of one or another format pipes up and starts talking about why JPEG is better than GIF (or vice-versa). Someone from the opposing camp takes offense, and the war begins.
The correct answer is: (E) None of the above
When it comes to selecting a file format for graphics, there's just no easy, universally true answer that's correct 100% of the time.

Try the image in both formats, and select the one that provides the smallest image without significantly compromising image quality.
Selecting Software

Many software tools allow you to optimize graphics for size. Certainly, high-end image-editing packages such as CorelDraw and Adobe Photoshop enable you to exert considerable influence over the size of a graphic image file. If you already have and use a high-end image-editing tool, then by all means, exploit its capabilities.
However, using such high-end tools just for basic image optimization is very much a piano-for-a-paperweight proposition. Simpler, less expensive tools perform the task just as well, for little or no cost.

For MS-Windows, shareware programs like L-View Pro and Graphics Workshop accomplish the task very nicely. In the world of X-Windows (such as Unixes and OS/2), the GIMP (GNU Image Manipulation Program) is a fine tool. (Similar packages no doubt exist for other computer platforms, as well.

Suggestions are welcome.) A software-specific tutorial on image optimization is obviously far beyond the scope of this article; suffice it to say that the techniques described here work equally well in all these packages.