Section 17.4. Transparent Images

One of the most popular tricks you'll find on almost everyone's web pages is the transparent image. Transparent images let the background show through, giving the remainder of the image the appearance of floating on the page. The effect is clever, and it is the only way to put nonrectangular images into your document displays. [Section 5.2.1]

Creating a transparent image is easy, once you understand how the process works and which images are candidates for transparency.

17.4.1 Colors, Maps, and Indexes

Images represent their colors in one of two ways: directly or through a colormap.

In the direct method, each pixel in the image contains the actual RGB values that define the color of that pixel. Such images are often called true-color images, since the number of distinct colors in the image is generally quite large. It is often the case that very few pixels in a true-color image share the same color, with many pixels having subtly different variations of the same color. The most popular image format using this representation method is JPEG.

Colormap-based images keep all the different colors used in the image in a table known as the colormap. Each pixel in the image contains an index into the table of that pixel's color. In general, the table is fairly small (usually less than 256 colors). This means that many pixels share the same color and that whole groups of pixels can have their color changed by simply altering the appropriate entry in the colormap. The most common image format using colormaps is GIF.

Image transparency is possible only with images containing a colormap and is currently defined only for images using the GIF89a format. In this format, one entry in the colormap is tagged as the transparent color. All pixels containing the index of that entry are made transparent when the image is displayed.

For example, consider an image containing eight colors. The colormap is eight entries long, with indexes numbered 0 through 7. Each pixel in the image contains a value from 0 to 7, corresponding to its color in the colormap. If you indicate that the second entry in the color map, whose index is 1, is transparent, all pixels with the value 1 are made transparent when the image is rendered.

17.4.2 Creating a Potentially Transparent Image

The cookbook way to create a transparent image is easy: take a conventional image, determine the color to be made transparent, and convert the image to GIF89a format, marking that color as transparent.

The most difficult part for most people is finding a conventional image that is suitable for conversion. To make the background of an image transparent, the entire background must be one color. Unfortunately, many images do not meet this simple criterion. Scanned images, for example, usually have backgrounds that are a mix of several slightly different shades of one color. Since only one color can be made transparent, the result is a mottled background, part transparent and part opaque.

Many image-editing tools use a process known as dithering to create certain colors in an image. Dithered colors are not pure but are a mix of several other colors. This mixture is not amenable to transparency. You'll often find dithering used on systems with small colormaps, like conventional 16-color VGA displays on some PCs.

Finally, some images have a pure background color, but that color is also used in parts of the image you want to keep opaque. Since every pixel having the appropriate colormap index is made transparent, these portions of the image become transparent as well.

In all cases, the problem can be solved by loading the image into an image editor, turning off dithering, and painting the background areas, usually by hand, to be a single color not used anywhere else in the image. Make sure you save the result as a GIF image, so that the colormap and pixel indexes are retained.

17.4.3 Converting the Image

Once you have an acceptable image and you've determined the color you want to make transparent, you'll need to convert the image to GIF89a format.

Several commercial products let you create transparent and interlaced GIF images, including Adobe PhotoShop and PaintShop Pro. Of course, these applications can do far more than simply convert transparent images, and they make great additions to the web author's toolkit.