How To: Create the clearest transparent Images

In all my 8 years of web development, I've always wrestled with transparent images. For the longest time, I was under the assumption that transparent .gifs were the best thing out there. And, I was wrong.

The trick: Use png's
PNG is by far, the most crisp, clear result you can find. The problem is that PNG is NOT SUPPORTED BY INTERNET EXPLORER! However, thanks to some serious research, google, and a beautiful code snippet by the folks at youngpup.net, we have a graceful, standards compliant workaround for the ugly duckling, or rather, Internet Explorer.

How to implement your transparent png
1. First, create your transparent png (using photoshop, or any image editing software)

2. Include your png on your page. Just like any other image:
<img src="images/my-trans-header.png" />

3. Grab youngpups beautiful transparent png script, and include it on your page.

4. You may want to rewrite the onload handler using your method of choice. (I use the prototype library which comes with a wonderful event handler.

5. IMPORTANT: You will need a 1px by 1px transparent gif named: x.gif located in the same directory as the file that is executing this script.

You're done!

More Resources
Young Pup's transparent png example
http://allinthehead.com/retro/69/