Learn how to add transparency

by Guest Contributor | Sep 29, 2003 7:35:00 PM

Tags: Guest Contributor

Takeaway: Transparency lets an image be displayed on a Web page with the page's background showing through the transparent parts of the image. Here's how to add transparency to your Web site.

By Paul Anderson

Most image editors offer the option of transparency, also referred to as a mask or alpha channel. Transparency lets an image be displayed on a Web page with the page's background showing through the transparent parts of the image.

The current Portable Network Graphics (PNG) format includes a full 8-bit alpha channel, with 256 gradations of transparency, to sit alongside the RGB channels. The current Web formats can't match that, but GIF does have the equivalent of a 1-bit alpha channel: You can specify a single color on the palette that should be rendered completely transparent.

To give a GIF transparency, don't bother with the direct transparency or masking offered within most image editors. They seldom take transparency into account when exporting a GIF, and it's of little use given a GIF's all-or-nothing capability. Instead, make sure the areas that you want transparent are all of a single color and that you don't need that color to be visible anywhere in the image. You may have to change the portions you want transparent to a new color , taking care to stay within the total 256-color limit.

Your image editor should offer the option of picking a color to declare transparent in the Save As or Export options, on an Optimization panel, or in a control or menu marked Palette or Color Table. Select the color that you want, and you should get a GIF with the appropriate areas transparent.

Pick a background color

If the visible part of your GIF has antialiased edges, make sure that its background is the same basic color as the background of the Web page where it will appear. The original background is interpolated into the antialiased region, so if the backgrounds don't match, you end up with a thin visible border of the original background color around your image.

Original		Transparent		Transparent, purple background		Transparent, orange background

Some very old browsers and non-Web applications don't support GIF transparency, and these applications will display the selected color. If you're a stickler for backwards-compatibility, or expect the same GIF file to be used in other applications, make sure that the transparent color looks acceptable when visible.

Paul Anderson is associate technical editor for CNET Builder.com. His responsibilities don't include handling graphics, so naturally, he handles them all the time.