Indexed Color and Palettes

What's an Index? What's a Palette?

This topic of Indexed Color is NOT unique to GIF.   TIF and PNG files can optionally save Indexed color too, but GIF requires it, GIF has no other mode. We speak of GIF files here, but it could be TIF or PNG too.

File formats like TIF and JPG store a 24 bit RGB value for each of the millions of image pixels. But GIF files only store a 4 or 8 bit index at each pixel, so that the image data is 1/6 or 1/3 the size of 24 bits.

Indexed Color is limited to 256 colors, which can be any 256 colors from the set of 16.7 million 24 bit colors. Each color used is a 24 bit RGB value. Each such image file contains its own color palette, which is a list of the selected 256 colors (or fewer colors in a smaller palette). Images are called indexed color because the actual image data for each pixel is the index into this palette. Each pixel's data is a number that specifies one of the palette colors, like maybe "color number 82", where 82 is the index into the palette, the 82nd color in the palette list of colors. We have to go to the palette to see what color is there. The palette is stored in the file with the image.

The index might be a 4 bit value (16 colors in palette) or a 8 bit value (256 colors in palette) for each pixel, the idea being that this is much smaller than storing 24 bits for every pixel. But an 8 bit number can only contain a numerical value of 0 to 255, so only 256 colors can be in the palette of possible colors. The size of many graphics files can be limited to use 16 colors, which only uses 4 bit indexes, making the file smaller yet, half the 8 bit size for the index for each pixel.

Not that the graphics may appear to have only say four colors, but any sharp edges (like say on text characters) are aliased, adding a few new intermediate shades of the colors, blending the edges so that the jaggies don't show. So if you count four colors, assume 8 or 16 colors will make it look a little better. Try it and look anyway.

The file also contains the palette too, which is the table of the selected 24 bit colors, or 3 bytes of RGB overhead for each color in the palette (768 bytes for 256 colors). The first RGB color in the table is index 0, the second RGB color is index 1, etc. There can be at most only 256 colors in the palette.

So indexed files have 24 bits stored for each palette color, but not for each pixel. Each pixel only stores either a 4 bit or 8 bit index to specify which palette color is used. In comparison, a 24-bit RGB image would store 24 bits RGB for each pixel (3x more size than 8 bit indexed), but without the 256-color 24-bit palette (only 768 bytes). But JPG compression can reduce this file size substantially, and 24-bit RGB can show 16.7 million colors, instead of only 256 colors. So, GIF would not be used for color photo images today.

Image programs will show the palette for indexed images, and can modify palette colors. There are various ways to create the palette, to choose the possible color choices that it will contain. This palette choice affects the image greatly.

Converting to 16 or 256 colors

There are several ways to convert to indexed color. Two choices are required, to specify a palette of colors, and also a choice how to dither or show colors not in that limited palette.

The dithering choices might be:

Dithering - Dithering means representing a color by combinations of dots of other colors. Dots is pretty much the definition. If the one exact shade of pink is not in the palette, then dots of other palette colors are mixed to simulate the color. Dithering often causes a visible and objectionable dotted or speckled image. But that simulated color may be much closer than a nearest color approximation.

Nearest Color - This selection is the same as disabling dithering, or no dots. If the exact shade of pink is not in the palette, then the closest color in the palette is used, which might not be very pink at all. Sometimes exact color is not important. No dithering means no visible dots.

Choices for a palette often have many names, but are of two main types, Standard or Adaptive:

Adaptive or Optimized or Perceptual Palette

These custom palettes are created from the 256 most representative colors within the one specific current image. The gradient image below is red graduated to white, originally over 5000 shades of pink and white. It is pretty much all red.

The PhotoImpact optimized palette at right for this image includes 8 system colors, including black, but this palette specifically has 248 shades of pink to be appropriate for this specific image. That is enough shades of pink that the quality of the GIF image does not show any banding or dithering in this easy case (one color). However only 256 colors is often pretty bad for normal photos (too few indexed colors for photos, which typically need up to maybe 100,000 colors, not 256). Since most colors in this graphic image are red, this optimized palette appropriately contains mostly red, so it is a much easier case than a normal photo. Optimized and Adaptive (two words for same thing) means optimized for the specific image, instead of being optimized for the old Windows 8 bit Palette Manager (next below).

Standard Web Browser Palette

The Standard Palette (often called the Netscape palette or Web palette) always contains the same colors for any image. It is sometimes called 6-6-6, because it contains six standard evenly spaced colors for each of Red, Green, and Blue. Those 6x6x6 color combinations create 6x6x6 = 216 standard color combinations, which are independent of any specific image (used for any image). The remaining 40 colors are standard colors reserved for the Windows or Macintosh desktop.

The Standard Palette always contains combinations of the following 6 tones for each of the Red, Green, Blue primaries:

The 216 combinations of these 18 colors above (six shades of the three RGB colors, 6x6x6 = 216) produce the Standard web-safe palette below (this one is the standard "Web" palette from Elements 2.0)

The 6x6x6 standard colors are intended to be somewhat suitable for ANY generic image, but it is not correct (not precise) for any normal image. For example, this very GIF image uses that same palette, and notice that 6 shades of blue are insufficient to show the Title bar without banding.

This standard palette was very important for old 8 bit video cards. The situation used to be (in historic times, ten years ago) that 8 bit video card drivers had only one Windows video Palette Manager, requiring ALL images on that desktop to share ONE palette simultaneously. We used to see bizarre psychedelic colors when the palette of a new image reloaded that palette and affected all other images on the desktop. Perhaps palette Index 82 changed from pink to green, correct for the one image, but very wrong for all other images on the desktop. When the WWW started showing web pages with multiple images on the one web page, it was awful. Netscape standardized the 216 color palette as a workaround.   Using one standard palette for all GIF images was better than the alternative, even if that generic palette was far from optimum for any image. This standard 216 color palette is that palette, one generic palette for all indexed images, even if not best for any image. But this concept of a Standard Palette or web-safe palette is obsolete today, now that we all have 24 bit video cards.

Today, using the Standard Netscape 216 color web-safe palette only helps those still using ancient 8 bit video cards. Using the standard 216 colors means old 8 bit video systems can show them without adding additional dithering (dotted color). This used to be important several years ago when we all had 8 bit video boards.

There are two schools of thought about this -
1) the belief that this might somehow still be important, and
2) why bother anymore? Why be artificially limited for no current reason?

My opinion is that the so-called web-safe palette is an obsolete concept, no longer useful today, and is instead outright detrimental today. There is no Windows Palette Manager anymore (except in drivers for obsolete 8 bit video boards). Today's 24 bit video boards can show any possible palette color, even when in 256 color mode (easy to test). We don't see dithered colors (speckled dotted colors) in 256 color mode anymore, unless the images were created that way in the first place by using a so-called web-safe palette. The GIF problems today are mostly all self-inflicted due to still trying to be limited to obsolete concepts (the use of non-optimum palettes). There is no magic in 216 colors on today's computers with 24 bit video.

Adaptive palettes (instead of web-safe 216 color palettes) give better images, and makes creating poor images unnecessary in indexed color. A non-dithered Adaptive palette is hard to beat.

Most of the GIF graphic images on this site (screen captured dialogs, etc) use a 16 color Adaptive palette from Nearest Color. The exact shade of color was not very important, but the small file size for the web was important (however where there was embedded photo content of many colors, the image may have been sliced, mostly GIF portions with a little JPG portion).

The few users still using ten year old 8 bit boards, if any, are frankly used to poor color, it's nothing they haven't seen before, and they can upgrade if they wish. Why make the overwhelming majority, those with the now standard 24 bit boards capable of good color, see poor color because it used to be that not everyone could? Personally, I ignore web-safe today, and I go out of my way to use the optimized or adaptive palettes for GIF files. The images are much better, without dithering dots to ruin them.

For the other side of it, Microsoft has a good write-up about Safety Palettes, about dithering and the standard 216 color web-safe browser palette. Note it is dated 1996, and it was still important then, but modern 24 bit video cards have changed the world now.

A little more, to be sure you understand Adaptive palettes:

GIF, particularly 16 color GIF, is ideal for web pages for logos and similar simple graphics without continuous tones. The files can be very small (assuming solid color graphics).

The next example shows how a 16 color GIF file with Adaptive palette can be better than a 256 color GIF file with Standard palette. The 16 color Optimized GIF file enlarged 4 times, and its palette.

OK, it's a special case, but since most of this image's colors are red, the optimized palette contains mostly red also. Since we only have 16 colors, and since 16 colors is insufficient for this graduated image, then many of the pinks are combined into the same few colors, and we see some dots (pixels, this is shown at 4x size).

In the image below with the Standard palette (above was Adaptive Palette), we do have the standard 216 colors available, but very few of them are the Reds that we need for THIS image, so the results are not even as good as the 16 color Optimized palette in this case.

This graduated image was ill-suited for 16 colors, but 16 colors of Red is still more than 6 colors of Red. This graduated image would be better as a 256 color GIF, or a JPG. The JPG file would be smaller, but not likely better than 256 color Adaptive in THIS case, because 24 bit color only has 256 shades of Red too, and red is about all we need here.

Most graphics (logos, dialog boxes, etc) don't have more than 16 colors anyway. In those cases, 16 bit GIF files can be much smaller than 256 color GIF files.