Transparent GIFs

Since all images on the Web must be of some rectangular shape, what happens if you want the images to be above a textured or multi-colored background? Well, you can make the image transparent. As we are about to demonstrate, there are a number of ways to do this, and each has its own issues.


Color Key Transparency
In a Color Key, there is no transparency. The background color is saved with image to match the intended HTML "BACKGROUND" color.

Using this method, anti-aliasing is preserved since the image blends to the background color.

Aliased
These transparancies use images with aliased (jaggy) edges.

Although no ghosting is visible, the aliased edges look awful on curved surfaces with any color background and should be avoided.

Alpha Transparency
Creating an alpha transparency requires you have software or a plug-in that allows you to use an alpha channel to mask the transparent area.

While this will reduce the halo effect around the images, it will make things appear a little jaggy and tends to encroach upon the image. It is wise to have the appropriate background colors on the image while saving.

Color Sampled from White Background
In this, the most common method, you have the ability to drop out 1 color.

The downside to this is that because of the anti-aliasing, you will see a halo effect if the image is on top of a much different colored background than the one you did your transparency to.
Color Sampled from Orange Background
 
Color Sampled from Blue Background
 

Alpha Transparency with Background Tile
When done correctly, the Alpha Transparency can be quite effective. Using part of the background image in the foreground image before making the transparency, the result is that the jaggedness has the correct color scheme, and therefore seems to blend in quite well.



Next Demo: GIF File Size Comparison