Transparency and (gasp!) Semi-Transparency

The Problem With Transparency

NOTE: With the exception of 2a and 2b, the pictures in the left column are the same as the pictures in the right column.

  • Left column: white background
  • Right column: green background
1. Transparent gif saved for a white background. Looks good on white, but the transition pixels show up on green.
2a. Transparent gif with a shadow and no background specified. Yuck. 2b. This image is a jpeg, and is therefore not transparent. Does it look fuzzy to you?
3. Transparent gif with a shadow saved for a white background. Looks good on white, terrible on green.
4. Transparent gif with a shadow saved for a green background. Looks good on green, terrible on white.
5. Transparent png with shadow. Notice that the shadow is the same in both columns. Because the shadow blends with whatever background it's on, a transparent png image with a drop shadow will look good wherever you use it, even on stripes.
6. Semi-transparent png over background images of sand and grass.

If you have ever used a graphics program, chances are you have been introduced to the concept of "layers" and of transparency. If an image on an upper layer lets you see part of an image on a lower (background) layer, then the upper image has transparency. In a graphics program, you can also generally reduce the opacity of a layer so that it forms a sort of "scrim", or veil, over the layer under it. This "scrim" is therefore semi-transparent.

On websites, however, until recently, there was no cross-browser-compatible semi-transparency available at all. You could make areas of your images transparent using the gif format, but there were some maddening problems with it. The gif format uses something called "index" transparency, where, in practical terms, you specify one of the 256 indexed colors as "no color". Blending from opaque to transparent was not possible, because a color was either there, or it wasn't there. Only the hardest-edged images were suitable for transparency.

Even a curve or angle could cause problems if you were trying to put something transparent over a background with more than one color. You must specify a background color as a "matte" color when you're saving an image as a transparent gif so that the transition pixels (see Antialiasing and the images to the right ) are the right color. If you want a picture that looks good on green, you must save it with a matte color of the precise shade of green you want. If you use a picture saved with a matte color of white on a green background, you will see the white transition pixels, as in the first row second picture to the right.

If you want your transparent gif to have a drop shadow, your problems are compounded. See rows 2, 3 and 4 to see what I mean.

Copyright problems with the gif format (Unisys and Compuserve started threatening to collect royalties from everyone who ever put a gif on their websites!) inspired, in 1995, an informal working group led by Thomas Boutelle to design a better, more extensible, and -- most of all -- free compression method. It eventually got named, informally and recursively, PNG, for "Png's Not Gif", though its formal name is Portable Network Graphics format.

The PNG-24 format uses "alpha" transparency, so permits the semi-transparency that the gif format does not. Furthermore, instead of 256 colors, you can have "millions and millions" of colors. Nice. You can see the effects of alpha transparency in row 5, where the drop shadow works the same on white as on green, and in row 6, where the background shows through the image on top.

Since the PNG format has been around since 1995, why is it suddenly newly attractive? Simple. IE 7 supports it. Other browsers have supported it for years, but without the buy-in from Microsoft, some 80% of your visitors would not be able to see the semi-transparency effects without an added JavaScript to make it work.

Now that Internet Explorer 7 has finally begun supporting the png-24 format, many of the blending and see-through effects we've been wanting to use are now possible. Life is good.

Here are some extra resources for you: