One PNG, two browsers, no hacks
By Kevin A. Freitas
On a recent trip to my personal website in IE I noticed a little "feature" of a promotional Firefox PNG button placed at the bottom of my page. Curiously, the Firefox PNG seemed to behave rather well in IE whereas the logo PNG I created that sits just next to it didn't degrade so gracefully. In a Moz-based browser both PNGs perform their alpha-blended tasks swimmingly which makes me wonder: Is there some code hack or work-around taking place on the Firefox PNG that's not on mine? The answer: No. I saved the Firefox image to my desktop and did a little drag-and-drop into each browser and came up with the same results.
Sample PNG in Firefox (left) and IE (right).
You can see the effect in the screenshots at right. Maybe you're not as confused as I am but since I couldn't find a lick of info about this out there I'm writing to tell all. Yes, I shall reveal the secret of this voodoo magic in hopes of making the web a more PNG-friendly place without the need for javascript or CSS hacks that increase loading time and decrease standards compliance (a.k.a. code cleanliness).
Make thee a graphic
I didn't have any luck duplicating this process in Photoshop 7 or CS so, at the suggestion of my co-worker, I figured out a solution using Fireworks MX (free 30-day trial). Make yourself a graphic with a transparent drop-shadow. Don't get too crazy using transparency elsewhere yet until you understand what's going on here. I recommend thinking as you would when making a GIF because we're going to be limiting this graphic to a 256-color palette in the end.
Be sure to make a nice, opaque outer edge for your graphic (flashing in pink).
Make sure you have a well-defined edge to your graphic like in the image at right. In the end, anything with any transparency value at all will disappear in IE. Before we move on, make sure there aren't any solid color layers behind your graphic (e.g. you should see that schnazzy checkerboard behind it). We're going for transparency here, folks!
Makin' magic
Now you need to save your graphic with just the right options to achieve the effect we're going for. Use the Export Preview option in the File menu. Set the Format to PNG 8 and choose Alpha Transparency from the pull-down toward the bottom. Adjust your color settings any way you like to get the best looking palletized image for your money. Notice that the palette for my image (at right) includes some colors with a little checkerboard over them. This represents colors that have at least some transparency to them and that won't show up in IE.
Conclusion
You can see that in a Moz-based browser we experience the transparency we would expect and in IE (right) we get a clean 1-bit, GIF-like transparency. Success!
So far I've tested this on the PC versions of Mozilla 1+, Firefox, IE 5, 5.5 and 6, Opera 7 and the Mac versions of IE 5.1, 5.2 and Safari. Test it yourself: View sample »
I suspect this to be a glitch in IE's support for PNG files. What's happening is that IE isn't rendering anything that's less than 100% opacity which is why the drop shadow isn't showing up as a big black strip (try saving your graphic as a 24-bit PNG and see what IE does with it) but rather completely transparent. What's left is a solid logo that takes on the appearance of a moderately well-dithered GIF. Although we're limited to an 8-bit palette with this method I think it's a great start with regard to PNG file usage on the web.
If anyone knows how to get this going in Photoshop or some other [preferably freeware] app please let me know. Although Fireworks seems to do the trick I'm a Photoshop boy at heart and would like to make this possible for any web designer, no matter their graphical orientation.
(2004-08-12)