previous next
 

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.

 

  top of page | next