Transparent GIFs
What is transparency?
It's the ability to take a GIF image, which by definition has 256 or less colors, and maps one of the colors to be transparent when viewed in a WWW browser (some applications now let you map multiple colors as transparent). The net effect is that, if done properly, the image looks as though it is see-through or could be floating on the background of the page it is sitting on. It also is nice because, although your image must be rectangular to begin with, you can have an image that looks to be any shape if you make the outside irregular border transparent.

Transparent GIF images are most commonly used as in-line images in WWW pages. Below is an example of a non-transparent image on the left and then the same exact image with the yellow color mapped as transparent on the right. The image with square borders now looks as though it has turned into an image with a circular border.

What tools do you need to make a GIF image transparent?

  • A simple utility called Transparency written by Aaron Giles (the same guy who wrote JPEGView which is a great helper application to view JPEG and GIF images). You simply open up an image in the Transparency utility and then choose which color in the image you would like to be transparent. Save the image, and you're ready to include the image in your HTML document to be viewed in your WWW browser.

  • You can also use the latest version of Adobe Photoshop, version 3.0.5 or version 4.0. It will let you save in the latest GIF format called GIF89a, giving you both transparency abilities and interlaced abilities.

  • A product from Adobe called PageMill (a WYSIWYG HTML editor and not to be confused with PageMaker which is primarily a print-based layout application) has the ability to choose a transparent color in a GIF image.

  • Other programs for the PC and for Unix workstations are available as well.