A Complete Guide to Web Design

270 Chapter 14 – GIF Format

Transparency

Web Design in a Nutshell, eMatter Edition

This effect is the result of anti-aliasing, the slight blur used on curved edges to

make smoother transitions between colors. Aliased edges, by contrast, are blocky

and stair-stepped. In Figure 14-1, the circle on the right has both anti-aliased edges

and an anti-aliased “j.” The circle on the left has all aliased edges. (Note: the

images below have been enlarged to make pixel-level detail more prominent.)

Figure 14-2 illustrates that when the color around an anti-aliased edge is made

transparent, the blur along the edge is still intact, and you can see all those shades

of gray between the graphic and the darker background.

This “halo” effect makes graphics look messy and unprofessional, but it is easily

prevented.

Use aliased edges

The easiest way to avoid anti-aliased fringe around your images is to keep your

image and text edges aliased (as shown in Figure 14-3). That way there are no

stray pixels between your image and the background color.

Figure 14-1: The figure on the right has anti-aliased edges; the figure on the left is

aliased

Figure 14-2: A “halo” effect created by anti-aliased edges in a transparent graphic

Figure 14-3: Transparent graphic with aliased edges (no halo effect)

Aliased Anti-aliased