Web Design in a Nutshell, 2nd Edition

Transparency

The GIF89a format introduced the ability to make portions of graphics transparent. Whatever is behind the transparent area (most likely the background color or pattern of the page) will show through. With transparency, graphics can be shapes other than rectangles (Figure 19-3)!

Figure 19-3. The same GIF image with transparency (left) and without (right)

In most graphics tools, the transparent area is specified by selecting a specific pixel color in the image with a special transparency pointer or eyedropper tool (in Paint Shop Pro, it needs to be specified numerically). All pixels in the image that match the selected color will be transparent when they are rendered in a browser.

To understand how transparency works, you need to start with the color table (the table that contains the palette) for the indexed color image. In transparent GIFs, one position in the color table is designated as “transparent,” and whatever pixel color fills that position is known as the Transparency Index Color (usually gray by default). All pixels in the image that are painted with that color will be transparent when viewed in a browser.

Let’s look at techniques for working with transparent GIFs. These techniques use Adobe Photoshop for its layering features. The first provides strategies for getting rid of “halos” (or fringe) around transparent graphics. The next gives pointers for preventing ...