PHOTOGRAPHY AND GRAPHICS BY JAY BOERSMA
|
 Anti-Aliased Images in Web Pages |
|
|
Graphic artists and designers are accustomed to using "anti-aliased" text in digital documents. Anti-aliasing is a subtle blending of the edges of objects with the background color to eliminate the stair-stepped look that can occur in digital art:
This blending with the background color is similar to what happens when you apply a drop shadow or a feathered edge to an object:
Anti-aliasing, drop shadows and feathered edges all work when you can control both the color of the art and the color of the background. These techniques can be a problem in HTML documents if you attempt to use transparent backgrounds in your images because transparency can only be applied to a single color - not the gradations of that color that produce the soft-edged effect. The result can be a jagged "halo" around your image.
The chart below illustrates several attempts at anti-aliasing text on web pages with white, light gray, middle gray, black, and red background colors.
-
Row 1: A GIF with anti-aliased drop shadow against a white background - the white background color is not set to transparent in the GIF:
-
Row 2: The same image with the background white set to transparent:
-
Row 3: A GIF with anti-aliased drop shadow against a gray background - the background is set to transparent:
-
Row 4: Anti-aliasing is not used:
-
Row 5: The shadow is converted to a dithered bitmap to approximate anti-aliasing:
-
Row 6: The image is anti-aliased against a medium-gray background and then the lighter-toned portions of the anti-aliasing are eliminated:
As these examples illustrate, it's not possible to create anti-aliased text, drop shadows or feathered edges with transparent backgrounds that will work against all possible background colors. To avoid creating pages that will look unreadable (or just bad) with certain background colors, it is best, if you need to use transparency, to use the techniques illustrated in rows 1, 4, or 5.
Fortunately, these problems are becoming less significant since current browsers are installed with default settings that allow the web designer to determine the page's background color (and most users never change their browser's default settings). For most typical web design situations, transparency in images is no longer necessary and simply matching the background of your image with the background of your page provides the same effect without the edge problems.
| Sources of free or inexpensive web clip art: |
  |