Overview: Cut out unnecessary colors, shades and other data from your GIF/JPEG's to create lightweight images.

Probably the easiest way to cut wait time and bandwidth costs is to simply decrease file size of your web pages. The easiest way to accomplish this is to trim out excess components from your images. This tip presents to users how to filter out unnecessary colors, compression, and a comparison between GIF vs. JPEG files.

Avoid Interlacing Background Images
Graphic applications commonly save GIF files with more colors than needed. Commonly, GIF files will use the maximum number of graphics allowable (256 colors) and these excess colors get saved throughout your GIF files. By simply editing your image preferences to reduce the number of colors used from 256 down to the bare minimums (usually multiples of 16 are acceptable, such as 16, 32 or 64 colors), web designers can usually cut out anywhere between 15-60% of the image file size. When these savings are tallied up for each image used, the bandwidth savings can become quite large.

In addition to color reduction, the actual palette size is reduced. For example, a 256 color image consists of an 8-bit palette. Being able to reduce the palette from 8 to 6 bits will cut the number of colors from 256 down to 64 and strip up to 25% of the file size. As a general rule to remember, the less colors used, the smaller file size can be accomplished. Below, we show a table of the palette bit number in comparison with the maximum number of colors allowed for the associated palette. We recommend changing your color depths with one of the suggestions given below to max out each palette you use.

This color reduction technique however will not work with JPEG's since JPEG's use the full color spectrum for each image. As a result, only use JPEG's for high resolution images (over 256 colors) and GIF's for lower definition images.

Although each graphics application varies in the setup preferences, there exists many compression options that web designers can take advantage of in order to strip down file size. The easiest example is to strip away any comments embedded in GIF files. Additional options such as image quality to file size ratios can also be manipulated in order to determine the best mix between quality and quantity for each image. The best suggestion we can make here is to read up on your graphics application compression options because each application varies and there is no standard. Compression options are usually globally defined from a preferences menu or general customizations menu.

Many webmasters struggle to decide whether to select GIF's or JPEG's for their images. Below, we present to you a comparison between GIF's and JPEG's and make recommendations of which file format to use under different circumstances.