Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Optimization Tricks

Last updated Oct 17, 2003.

Optimizing graphics means ensuring that graphics download quickly without sacrificing visual quality. For many sites, graphics make up the bulk of the download time, and we're not about to give up those pretty visuals. In the GIF, JPG, and PNG sections, there are references to compression because each uses a different compression method.

The smaller the image file size, the faster it downloads. Most graphics programs provide the file size information, and some provide two or four previews of the same image to test out the different settings to determine the optimal setting for the image. For each preview, you can modify the file type (GIF vs. JPG), dither method (positioning colors and shades by varying the pattern of dots to simulate a color), bit depth for GIFs (2-bit vs. 8-bit, the number of colors in the image), and quality for JPGs (max, high, medium, low, or percentages).

One of the first steps of optimizing an image is to save it in the right format to ensure that it's appropriately compressed. In other words, photos and artwork with continuous tones should be JPGs, whereas flat colored pictures and line art are GIFs. What about images that contain a photo with line art, such as pasting a person's face onto a flower? In this case, save the file as a GIF and JPG for comparison, and determine which looks better and check the file size.

Play with the different compression ratios when optimizing JPGs by gradually increasing the compression in increments of 10 percent until the image reaches an unacceptable point as well as changing the computer's number of colors and screen resolutions. Then, reduce the compression a little at a time until the image looks acceptable. Some programs use high, medium, and low instead of percentages. In either case, experiment until you find a compromise in file size and image quality. When using a resolution at or greater than 800 x 600, you're playing with millions of colors.

Optimizing GIFs involves playing with the number of colors in the image, which is referred to as bit-depth. Instead of using percentages as in JPGs, you're reducing the number of colors that appear in the image. The fewer colors in the picture, the smaller the file. Experiment with the bit-depth and file size until you reach an acceptable point where the picture is of good quality and the file size has decreased. Sometimes, dropping a few colors makes no difference to the file size; at other times, it can decrease dramatically.

As for dithering, dithered images are not as well-optimized as images without dithering. It doesn't mean skipping dithering altogether because it can make a difference for some images. Dithering isn't used much, but it's good to try it out to see if it helps.

Graphics optimization is more of an art than a science in that there is no exact way to achieve optimal results. It's like science, however, in conducting experiments until reaching the best results. The basic rule is to use the correct file format for the graphic to ensure that the right compression is applied to it and then use a graphics program and play with it until you achieve the smallest size possible with an acceptable quality.