Kevin A. Freitas

E: freitaka@blarg.net
P: 253.229.5093
W: kevinfreitas.net/pro

Print Projects Resume Request Info Articles Extensions Client Area

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

Non-opaque colors will show up with a little checkerboard icon over them

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!

My final PNG degrades nicely in IE

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)

« Back to Articles

Comments (57) | To Top

8/16/2004 @ 9:21am

Excellent work Kevin...

I really liked the way you did this article, and I think it's a great entrance into the realm of web design articles. I'll be looking forward to more where this came from.

Specifically, I like how the writing was succinct, yet very clear and easy to understand. The sectional organization was also well done, and the images were helpful, yet unobtrusive.

Good work!

-Darren

by Darren Struthers

9/28/2004 @ 3:58am

I'll second what Darren said. The example PNGs and the animated GIF demonstrated the concept very well. I've heard of this being done in Photoshop but I don't use it myself so I can't confirm it. At A_List_Apart here's a discussion entry "Alternative (8 - Bit color

by Kerry Watson

9/28/2004 @ 4:03am

Second attempt.

There was a "less than" character in the discussion entry subject line. I changed it to a hyphen.

I'll second what Darren said. The example PNGs and the animated GIF demonstrated the concept very well. I've heard of this being done in Photoshop but I don't use it myself so I can't confirm it. At A_List_Apart here's a discussion entry "Alternative (8 - Bit color -10K PNG)".....

http://www.alistapart.com/discuss/pngopacity/17/

I spotted the comment: "Solution: use PHOTOSHOP and set the .PNG setting in 'save for web' WITH transparency, but all in 8-BIT color or less."

I have a PNG advocacy site which includes a review of image tools which can generate smaller PNG files than the best known commercial packages:

http://www.webcolors.freeserve.co.uk/png/review.htm

It is possible to manually create the effect you describe using IrfanView and TweakPNG, both freeware. The problem is that it's an extremely fiddly thing to do. IrfanView introduced the option to set a single transparent color in version 3.91. But what it actually does is to create a transparency chunk in the file with as many entries as there are palette entries. But only one entry is set to 'transparent'. The transparency for each palette entry can be manually adjusted afterwards using TweakPNG. For example, the Firefox logo on your homepage applies 10 alpha values to a palette of 128 colors.

Wouldn't it be great if there was a freeware tool that could apply alpha masks using this method. In the Firefox logo example, if the colors with transparency values were sorted to the beginning of the palette, the transparency chunk would only need to have 10 entries.

10/2/2004 @ 6:03am

You saved my life! If only you knew how timely this article is. Well I guess you do now, Thank You! :)

by John Oxton

10/3/2004 @ 3:35pm

Thank goodness I ordered Fireworks instead of Photoshop! This will prove extremely useful, as I currently have a problem with IE and a PNG. Thank you!

by Hans Hyttinen

10/25/2004 @ 8:53pm

nice solution you have here. but makes you wonder. will microsoft never accept the open source community? will it never make ie png-compatible? will there always have to be such fixes just because microsoft will never open its eyes?

by hasan a khan

11/4/2004 @ 10:12am

I think we will know within a year or so. Once Firefox 1.0 is out and we give the 'net stats a couple months, M$ may have to kick out a new version of IE with a few new changes/features. Judging by the lashing the Cannel9 IE (http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerFeedback) guys got when the first came online, they're well aware of the issues of PNG and other standards support. If M$ and it's lack of certain features in IE angers enough web developers they'll have to start listening because we're the folks who make recommendations to clients.

by KevinFreitas

11/6/2004 @ 4:39pm

I'm a little late here, but I think this software would be useful, called pngquant ( http://www.libpng.org/pub/png/apps/pngquant.html ).
I've used this for quite some time, converting 32-bit PNGs to 8-bit, never even realise that it can do *this*. Wow.

by Lim Chee Aun

11/9/2004 @ 8:59am

I'll be sure to try that out since I'm looking for a free alternative to achieving this without the need for Fireworks or Photoshop. Thanks for the link!

3/7/2005 @ 3:22am

A friend of mine has made an gui for pngquant, so you don´t need to work in DOS.

Yoy can find it here
http://www.jedisthlm.com/2004/10/13/gui-for-pngquant/

by Jens Wedin

4/2/2005 @ 1:04am

PNG is one amazing format and it is so much more compressed than other formats. I think the problem with the article in Alistapart is that it's transparency detection has very heavy Javascript. If any of you are using a textpattern CMS and are trying to use PNG's, the following plugin does all the hard work of transparency detection:

http://forum.textpattern.com/viewtopic.php?pid=46812

by John Ardburl

4/13/2005 @ 11:17am

Hi all! As for incorrect PNG transparency rendering in MSIE, it can be treated by css filters. Using it an image can even retain its alpha transparency, i.e. your image will appear with the semi-transparent shadow.
E.g. http://koivi.com/ie-png-transparency/

by richard

4/25/2005 @ 2:05am

(First: sorry for my bad english). I have try this in Gimp, and it works. In the Image Window: Image -> Mode -> Indexed... , then you can set a 255 Color Image and save your image as .png and it works. I'm happy :-)

by René Maroufi

5/4/2005 @ 2:56am

Thanks for the great article. Saved me a lot of hair tearing. As Rene rightly says, this works no problem in GIMP and also GIMP 2.

by Rob Lang

5/31/2005 @ 3:31am

Hey peeps,

I've got an issue with mine, I followed creating a HTC with a jscript that attached the Alpha Image Loader to the img if its a png, but its playing up.

Firefox, shows this image perfectly, but IE makes it look like there is a white background to the png.

have a look http://82.39.11.101/root_css/

Gav

by Gavin

6/15/2005 @ 12:46am

I love this workardound, its much better than using the Alpha and other javascript hacks.. we are comprising a little on the quality (since its only 8-bits) but it works without adding external coding..anyway IE is going to have PNG in 7.0 so this is good enough for now!

KUDOS for the good work..and thanks for making me realize the advantages of Fireworks..had it but never used it.. had been an Adobe Illustrator gal for too long.. :D

by Christine

7/28/2005 @ 6:14am

Coming in a bit late here - but can the people who say this works in Gimp explain? All indexing seems to do is reduce the transparency to 1-bit. The trick is to save as 8-bit but using a 32-bit palette. Fireworks is pretty unusual in being able to do this. But maybe I'm missing something.

by Paul

9/7/2005 @ 1:48pm

Unfortunately, this technique does NOT seem to work for layered CSS backgrounds.. at least not consistently. While FF will sometimes render the image (or parts of the image) correctly, scrolling and returning will cause the fully transparent pixels to become opaque.

by matthew

11/7/2005 @ 5:02am

Excellent discovery Kevin! This will come in so handy for a project I'm working on right now.

by Dan Bailey

11/17/2005 @ 2:16pm

Nice find! It's amazing that I didn't stumble on this little post until over a year later, though. How on earth did this escape me? Anyhow, keep 'em comin'! :)

by Scott Johnson

11/22/2005 @ 6:15am

fireworks is great. this article is a big help. thanks

by kosmar

12/19/2005 @ 1:01pm

This works like a charm...
Thankyou.

by Ranjeet

2/14/2006 @ 10:55pm

Forget using IE. It is garbage. Such a dinosaur of a program. Drop all M$ products and choose the cheaper, higher quality, more reliable, more secure solution. Use Open Source and GNU software. Linux, GIMP, OpenOffice, Firefox, Thunderbird, etc. Take a stand and refuse to be controlled by software that is worthless.

by Michael

2/15/2006 @ 6:50am

IE is garbage and I'm all about good, free software. I only enjoyed this particular technique since it takes relatively little effort and no special coding to make work in IE. Since it's used by so many unsuspecting people, I figure I'll work something that makes their experience that much better without forcing the Firefox issue on them. Some people just aren't ready yet -- thankfully 10+% of internet users are. Go Firefox!

2/15/2006 @ 7:03pm

You can do the same with Photoshop, just takes a bit more effort (go to Save for Web, select PNG-8, and play with color palette like Kevin does above.)

Not sure I'd be quick to claim IE as garbage, especially given that the reality of the situation is that US corporate life pretty much centers around IE. Can't argue that, no matter how valiant you think of the erstwhile stand you are taking.

Instead of the "I hate IE and I hate M$" droning, we should instead make better use of our energy by commending the Mozilla community and others like Kevin who find ideal solutions for a non-ideal browser climate.

by Jeff

2/21/2006 @ 11:56am

Thanks for this. It isn't the alpha level transparency the other browsers can manage, but this is a reminder that we can often find solutions which degrade nicely to ie without resorting to extra code.

The end result for me? Still not as pretty for most of my visitors, but more compact graphics and html.

by Craig Hermanson

3/9/2006 @ 2:30pm

For Fireworks 8, the "Export Preview" is not available in the File menu. Instead, use the "Image Preview" option. When you have everything the way you want it, use the Export button from that window. Everything else is the same as outlined above.

by Justin Koivisto

6/18/2006 @ 9:56am

Pretty nice trick Kevin. This trick saves me alot of time.
You were right about IE7. In IE7 Beta2 your sample renders perfect.

by Filipino Ice Girl

7/7/2006 @ 11:54am

Very useful information. Thanks
I will test this in one of my new projects

by John Clothes

7/7/2006 @ 12:51pm

John: it works well as you can see on a site I'm working on at www.feedtacoma.com -- all the images on the right side of each section were done using this technique.

Just make sure if you use Fireworks 8 you follow Justin's note above to use the "Image Preview" option rather than "Export Preview".

Cheers!

7/19/2006 @ 2:49pm

@Justin, Thanx a lot for the tip on fireworks 8! This really helped me a lot

by Yerk

9/7/2006 @ 1:05pm

thanks! I've looked for some workaround so long! thanks so much!

by thanks!

10/2/2006 @ 3:19am

http://support.microsoft.com/?scid=kb;en-us;265221

by Lorimer

10/2/2006 @ 3:23am

by yacht for sale turkey

10/31/2006 @ 11:40am

Good hint; in the Firefox 2.0 your sample renders correct.

by Restposten

11/14/2006 @ 5:09am

yes it's renders correct

by praca

11/15/2006 @ 9:02pm

Thanks for the great article - very useful information.

by Eintrag

11/24/2006 @ 3:37am

Keep up the good work. Greetings

by Pozycjonowanie

12/5/2006 @ 1:05pm

it works, thank you for sharing your knowledge

by Andreas

12/5/2006 @ 1:06pm

very helpful, thanks from Shanghai ;-)

by Yiling

12/9/2006 @ 3:12pm

Fireworks is pretty unusual in being able to do this. But maybe I'm missing something.Good Joob !! Thanks man!

by eMule Forum

12/10/2006 @ 2:40pm

by Server List

1/28/2007 @ 5:46am

Innovative vision, keep on that!

by Andy James

2/28/2007 @ 7:16am

oh man, you made my day! If only you knew how timely this article is... :)

by Echthaar Haarteile

3/6/2007 @ 2:28pm

by Dekoration

3/13/2007 @ 2:12pm

Fantastic article and very helpful site. Can I insert link to this site on my site? Greetings

by Aukcje

4/14/2007 @ 10:16am

Thxs Kevin. This seems to be a oldie, but goldie ;-)! Maybe I should use fireworks more often....I'm currently redesigning our small and very old clubsite and looking for an alternative for all browsers and without js/hacks. Regards Daniel

by Daniel

5/4/2007 @ 1:42am

very helpful, thanks. Maybe I should use fireworks

by Sir Not-Appearing-In-This-Flim

6/22/2007 @ 3:16pm

Disappointingly, this procedure does NOT look to effort for layered CSS backgrounds.. at least not every time. Whilst Firefox will from time to time make the picture (or parts of the image) appropriately, scrolling and returning will effect the fully opaque pixels to become transparent.

by Greg

6/26/2007 @ 2:01am

Thank you for sharing this information, this is almost 3 years old, but still works...

by Gabi

7/23/2007 @ 11:18am

by Funimal.de

8/13/2007 @ 9:22am

by Kyir

11/29/2007 @ 11:44am

When you have everything the way you want it, use the Export button from that window.

by Garagentorantrieb

12/5/2007 @ 9:13am

great article thank you! this has been really useful for me!

by Jenny Wilde

12/7/2007 @ 10:37am

Good article - i know its from 2004, but still i didnt manage to get a proper transparency in 2007 :) But thanks to you i managed.

Thanks, Flibber!

by Flibber

3/26/2008 @ 1:49pm

Fantastic article covering some points I really needed some good usability info for. My page:
kredyt mieszkaniowy ::
kredyty mieszkaniowe

by sprzedam mieszkanie

5/30/2008 @ 8:52pm

Thanks alot ...
I have been facing this problem for 4 months ..
i tried several css hacks and javascripts but nothing was useful .
Thanks

by Saif Yousif