Transparency 269GIFTransparencyWeb Design in a Nutshell, eMatter EditionAdvantages
The advantage to using interlacing is that it quickly gives the viewer some idea of
the graphic to come. This peek may be enough to make some important deci-
sions. For instance, if the graphic is a familiar imagemap, the user can use the link
to go to another page before the entire image has downloaded. In some cases, the
partially downloaded image might be enough for the viewer to decide that she
doesn’t want to wait for the rest.
Disadvantages
The main trade-off in choosing to make a GIF interlaced is it will slightly increase
the file size of the resulting graphic. There are also aesthetic considerations
involved that come down to a matter of personal taste. Some viewers would rather
see nothing at all than look at the temporary visual chaos an interlaced GIF
creates. For these reasons, you may choose to limit interlacing to instances when it
makes sense, such as for large imagemaps, instead of using it for every small
graphic on a page.
Transparency
The GIF89a format introduced the ability to make portions of graphics trans-
parent. Whatever is behind the transparent area (most likely the background color
or pattern) will show through. With transparency, graphics can be shapes other
than rectangles!
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 that color will be transparent
when viewed in a browser.
In most graphics tools, the transparent area is specified by selecting a specific
pixel color in the image with a pointer or eyedropper tool (in Paint Shop Pro, it
needs to be specified numerically). All pixels in the image that are the selected
colors (corresponding to the same position in the color table) will be replaced
with the Transparency Index Color and therefore transparent when they are
rendered in a browser.
Let’s look at three techniques for working with transparent GIFs. Most of these
techniques use Adobe Photoshop for its layering features. The first provides strate-
gies for getting rid of “halos” (or fringe) around transparent graphics. The next
gives pointers for preventing unwanted transparency within your image. Finally,
there is a demonstration of how transparency can be edited using the Alpha
Channel for the image.
Preventing “Halos”
Far too often, you see transparent graphics on the Web with light-colored fringe
around the edges that doesn’t blend into the background color.