The Bandwidth Conservation Society

Bandwidth Conservation Society / Tutorial

Tutorial 1... A quick guide to color palettes
Note: If you're viewing this page with an 8-bit video display system, you may not notice any difference in some of the examples. While you may not see the visual difference, take a look at the difference in file sizes.

The GIF format is the common image denominator for web publishing. A versatile format, it allows for graphics to be compressed in a variety of ways. The big deal is the number of colors available. We'll show you how to make an 8 bit gif, 3 4 5 6 or 7 bits, but still achieve acceptable quality. Plus... comparisons of how an image looks at various bit depths.

Palettes Most GIF files you see on web today are made up of an 8-bit palette. Means that there are 256 available colors in any given picture or graphic. But, in most cases the palette can be reduced, which reduces the file size of the GIF, yet still retain acceptable image quality. (For instance a 6-bit GIF only uses 64 colors but can reduce the file size by over 25%)

And, the GIF format allows for the definition of an alternative color palette. Rather than using the standard 256 colors of your system palette, the GIF file can redefine the 256 colors in the palette. (Note: on some 8-bit video displays, with some browsers, this might get weird.)

The bottom line is that by reducing the palette (bit depth) you also reduce the file size. This chart shows the bit-depth vs number of colors:

Continuous Tone Images (Photos, Renders, Etc.)
Photos are our first area of study. This sample image was chosen as representative of many of the considerations found in most photos or renders. Skys are especially difficult to optimize because of the graduation of the dark part of the sky to the light part of the sky and the graduation of solid to transparent cloud activity.

(Note: For comparison purposes, we've included several formats in these examples. Depending on your bandwidth, you may experience a slight delay as these images load. There is no more than 50K per page.)

Compare this 8 bit GIF image (16,618 Bytes) using the adaptive palette option in Adobe Photoshop to:

the Original 24 bit Image (JPEG),
an 8-bit GIF image using the Macintosh System Palette,
and this 8 bit GIF image using the adaptive palette option in Adobe Photoshop.

Balance... You can also look at our notion of balance between quality and bytesize. This image is a 5-bit GIF (7,554 Bytes) with an Adaptive Palette and no diffusion . While there is some flattening of the colors, it retains sufficient quality to convey the image accurately and pleasantly. The bytesize has been reduced by a whopping 9,064 Bytes (A 54.5% reduction)

Site Supplied by:
World Access Internet Navigator Show me the The Way!