Overview

A picture might be worth a thousand words, but is it worth 10 seconds of download time? Ask yourself this question before adding a picture to your website. Web graphics today are almost entirely either .jpg or .gif files. Your choice of file type will greatly influence the size of the graphic.

Keep the Graphic File Small

The simplest way to reduce the size of a graphics file is to keep the graphic itself small. You can reduce the size of a graphic by cropping it in a graphics editing program. Another way to reduce the size of a graphic is to resize it proportionally.

As a general rule, never use a graphic that is any larger than the size it is displayed in on the Web site. For example, if you create a graphic at 800 x 400 pixels, do not display that graphic at 200 x 100 pixels. Although the graphic is displayed at a smaller size, the file still downloads at full size and the browser reduces the display size.

Reduce the Size of .jpg Files

The JPEG file format works best with large numbers of colors in graphics that are photographic in quality. You can compress .jpg files significantly without a noticeable degradation in quality. However, compression of JPEG images is "lossy." This means that some data in the image is lost during compression, so that image quality degrades at high compression levels.

The following figures show an uncompressed original photograph, and compressed versions of the photograph, with file size and download time at 28.8 Kbps connection speed (which is a general standard to work by, regardless of your connection speed).

Original photo (200 x 161 pixels) 10 KB, 12 seconds
At 20% compression 8 KB, 5 seconds	At 70% compression 6 KB, 2 seconds	At 90% compression 3 KB, 1 second

As you can see, at 20% compression, the file is less than half the size of the original and download time is less than half. At 70% compression, there is still no noticeable degradation of the image and the download time is greatly reduced. At 90% compression, color banding is visible and although the file size is half the size at 70% compression, the download time is only 1 second less. There is no advantage to compressing the file by 90%.

Reduce the Size of .gif Files

The GIF file format works best with graphics that contain a limited number of colors, and consist of lines or text. Files in GIF format tend to download quickly, for they usually contain 256 colors, the same number of colors that many computers display. If you convert an image from JPEG to GIF format, you will lose color information.

In the GIF format, colors are saved in horizontal rows. Areas containing solid colors compress by the greatest amount. Colors that are arranged horizontally result in smaller files and faster downloads. For example, a file containing two stripes of horizontal colors is less than half the size of a file that contains two stripes of vertical colors.

The following figures show the same graphic of a flag in both horizontal and vertical orientation.

File size - 6 KB.

File size - 9 KB.

When you save a graphic to a GIF format in most graphics programs, you have the option of saving the file as interlaced. Interlacing is a technique that displays a file in horizontal chunks, something like venetian blinds. The advantage of using interlacing is that an image appears quickly, although in a low resolution, and then builds to a fully resolved image. Interlaced files typically are larger than non-interlaced files.

Many graphics programs provide the option of compressing .gif files by LZW compression. Unlike the compression of .jpg files, compression of .gif files is lossless. This means that no data is lost during compression, so the image does not degrade.

Tips

When you are optimizing a graphic, please keep in mind the following tips:

• Always make a copy of your original before you do anything else.
• Never compress a file that has already been compressed. For example, if you want to compress a 100 KB image to 20 KB, you will get a cleaner result by compressing directly from 100 KB to 20 KB than by compressing first from 100 KB to 50 KB and then to 20 KB.
• If you do want to use a large graphic, consider creating a thumbnail that leads to the graphic. A thumbnail is a very small representation of the picture, that when clicked on, brings up the full version.
• Use only as many colors as your audience can see. If your audience consists of people whose computers can only display 8-bit color, use no more than 256 colors.