2007-05-01: Transparent images are useful when you are not certain of the page background color on which your image will be displayed, or you intend to display your image in front of a complex background rather than a single background color. Both GIF and PNG images can have transparent backgrounds. JPEG images cannot. PNG images can also have semitransparent areas that "blend" with what appears behind and in front of them; this is called "alpha channel" blending. However some older web browsers do not support partial transparency. See what image file formats should I use? for more information about the different image file formats. All serious graphics programs provide ways to make an image transparent. The exact steps for each program vary; you will want to consult the online help for your program. For instance, GIMP, a free graphics editing program for both Windows and Linux, makes it easy to create a transparent image:

1. Pull down the File menu.
2. Pick "new."
3. Click the "+" sign next to "Advanced Options."
4. Select "Transparency" from the "Fill with:" menu.
5. Click "OK."

You now have a completely transparent image, to which you can add additional elements. In order to preserve the transparency for use on a website, you will need to save this image in GIF or PNG format. JPEG images do not support transparency.

Alpha Channel Versus 100% Transparency

Advanced programs like The Gimp and Photoshop support the idea of an "alpha channel," which allows every pixel (dot) to have any level of transparency, from completely opaque to completely transparent and anything in between. This is useful because it creates much smoother transitions. And the PNG file format supports alpha channel too.

The good news is that Internet Explorer 7 and Firefox both support PNG's alpha channel transparency very well. The bad news is that some older browsers might not (they will show the image, but they will not show the transparent areas correctly). The alternative is to use GIF images. Unfortunately, GIF supports only 100% transparency, so you will lose some elegance when using a transparent GIF instead of an alpha cnanel PNG.

For additional information, see how do I make graphics for my site?

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!

---