HTML & XHTML: The Definitive Guide, 5th Edition

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.

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 ...