|
GIF Image Transparency
and Anti-aliasing
Transparent GIF
GIF is an excellent format for simple line art and also has a unique
feature which allows limited transparency. One color in an image's palette
can be designated as transparent. Transparency means an image can be
displayed on a web page with the background showing through the transparent
piece of the image.

Figure 5 |
Figure
5. A GIF image where the background is transparent showing the
white background of the page. The image appears to float on the
page and not have the rectangular shape as bordered in Figure
6. This transparency technique is very useful when using line
art or graphic text such as we see in this illustration. |

Figure
6 |
To make a GIF transparency
make certain the area you want to be transparent is of a single color,
and that you don't need that color to be seen elsewhere in the image.
(It's often all or nothing with transparency in GIF files. The color
you select to be transparent will be transparent anywhere it exists
within your image.) Select Save As or Export from your graphics program
and specify GIF as the format
and your program should offer the option
of picking a color to specify as transparent.
Selecting the
Background Color
A common mistake in web graphics is using transparent GIFs that
are created with out consideration to the background color of the web
page. We have all seen web images that look as if there is a jagged
edge or halo surrounding the image. If the visible part of your GIF
has anti-aliased edges (and it more than likely will unless your creating
only rectangular shapes) make sure that the background color (that is
the color you will select as transparent) is the same basic color as
the background of the web page in which it will be included. The image background
is interpolated into the anti-aliased region. If the background is
not similar you will have a thin visible border around your image.
|
Figure
7. This GIF appears as it should. A white background was selected
as transparent because the image will be used on a white web page.
|
 |
Figure
8. Here the same image (transparent background anti-aliased
to white) is used on a green web page. The white halo surrounding
the image is clearly visible. |
|
Figure
9. Now the image has been corrected. The white halo has disappeared
because the transparent background was created using the same color
that will appear in the cell's background. |
More
on Anti-aliasing
Computers render the dots or pixels that make up an image in a grid.
This is a problem for images that aren't grid-shaped (and few are).
The division between pixels is called alias. Graphic programs
use a technique called anti-aliasing to smooth out the edges
of an image so they do not appear jagged. Anti-aliasing interpolates
colors where they meet making the image appear smooth.
 |
 |
| Aliased
text (1k) |
Anti-aliased
text (3k) |
Anti-aliasing is
why GIF images sometimes require a higher color depth (more colors resulting
in a larger file size) than may seem necessary. At first glance the
images above appear to be only 3 colors: yellow, white, and red. For
the alias image this is true, but the anti-aliasing image is using many
more colors to create the illusion of a smooth boundary or edge.
 |
This
close-up of aliased text show the distinct grid boundary between
the white "e" and the red background. |
|
The
close-up of the anti-aliased "e" reveals a blurred boundary
(made-up of several colors) that make the image appear smooth. |
|