Like the autobahn, on the Web speed is everything. As Jakob Nielsen, a highly respected Web usability expert puts it, "Every Web usability study I have conducted since 1994 has shown the same thing...fast response times are the most important design criterion for web pages." My years of Web construction experience have brought me to the same conclusion. "If speed is the name of the game, then how do I speed up my pages?" is a question I hear commonly. While there are many things that affect how fast your pages load (such as server speed, HTML code quality, and user connection speed) the single greatest determinant is file size. The greatest way to reduce your overall file size is to reduce the file size of your graphics. Optimization is the process of saving your images for the Web. To explain it further, getting your images ready for the Web means that you shrink their file sizes down as far as possible. This is done by getting rid of the stuff that you don't need. Every image has colors and hues that are not discernable by the human eye. You can take those colors completely out of the image and not see any difference whatsoever - until you look at their file size! I have optimized images down to less than 20% of their regular file size with no apparent change in image quality.

So, how does one go about optimizing an image for the Web? The process sounds complex - and a few years ago it was, but thanks to modern software, today it is really very easy. Any good graphics software package will have a built-in image optimizer that does all of the hard work for you. You simply need to open your optimizer and watch the image as you change settings - usually image optimization software will have a slider that you can use to select the quality of the image (lower quality has lower file size) - when the image quality is as low as you can get it without it looking bad, you hit enter and viola! The software does the rest.

Getting good optimized images does take some practice, however, so here are a few helpful pointers that will make the job easier:

#1 - Always use the jpg file format for photos and the gif file format for illustrations. The jpg file format was designed for photos and can get photo file sizes down much lower than gifs and with better quality.

#2 - Don't re-optimize a jpg. While you can re-optimize a gif as many times as you want without losing quality, the same is not true of jpg's. If you are working with a photograph, and you know that you are going to optimize it for the Web, save a copy of the original so that if you ever need to make changes you can optimize from the original. The more times you re-optimize a jpg the higher the file size will be and the lower the quality will be.

#3 - If your software allows, save your jpg images in the "progressive" format. A progressive jpg appears "blurry" when it is first loaded into the browser because the image is displayed with only half its pixel count. As the page continues to load, the image will progressively get better and better until it comes into complete focus. This doesn't add any size to the file, and while it doesn't load any faster than a regular jpg, studies indicate that psychologically users seem to perceive that progressive images load faster.

#4 - When optimizing a gif image, use the smallest color palette that you can get away with. There are often preset optimization settings (usually 8 colors, 16 colors, 32 colors on up to 256 colors) but you can often use a custom palette (5 colors for example). Try to get the color palette to the fewest number of colors possible without sacrificing major quality.

#5 - When working with gif images, you will usually have the option to "dither" your images. Dithering simply means that colors will be combined and mixed to make your image look closer to the original colors. The only problem with this is that it adds a good deal of file size to your images. So, unless it is absolutely vital that your colors be exactly as they are in the original, don't use the dither feature.

As you build your Web sites, remember that excessive file size is the great killer of success, and proper image optimization is only one of the cures - but a vital one. You should also remember to use graphics sparingly, and shrink graphics down in physical size to reduce load time as well.

Next Issue - Preparing a photo for web use

Note: Those of you who have PhotoImpact can access your image optimizer by clicking on Web and then selecting Optimizer which will bring up the image optimization window. Photoshop users click on File and then Save For The Web.