Making PNG image transparency work in Internet Explorer

[Robin]

[webwiz]

We are talking about multiple levels of transparency via the "alpha channel" here of course. 8-bit PNGs with binary (on/off) transparency work everywhere. They act the same as transparent GIFs, with some real advantages over GIFs, such as (mostly) smaller file sizes - sometimes much smaller. Animation is not possible, however.

In my opinion, this article is "too little, too late." Too little, because it does not warn about some severe limitations to the method[1]. Too late, because IE 7 supports full alpha transparency. Note that these problems only pertain to Windows versions of IE, while the solution does not work on versions prior to 5.5.

(IE 5.x for Mac fully supports PNG transparency, as do nearly all other browsers since 2000. Heck, even WebTV supports it!)

Tony Davis and I have been having a discussion about PNGs recently. He noticed that PNGs created by Photoshop or Illustrator can cause a color shift in IE 7. He also noted that PNG file sizes from these applications are larger than GIFs or JPEGs. This should not be! Following this up, I discovered that these Adobe products add a lot of "meta" cruft to PNG files. This extra data not only makes the images much larger than they need to be, but also causes the color shift.

My favorite solution to this mess is to use Fireworks to create my alpha-transparent image, in a way that gives IE 5 and 6 clean-looking 1-bit transparency[2]. No extra code needed!

[1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html
[2] http://www.kevinfreitas.net/pro/articles/png-magic/

[Robin]

I love Fireworks as a web graphics tool, but if you don't have Fireworks as a tool then you have to do something to overcome the limitations of IE6.  A lot of people don't have Fireworks, it's really not a mainstream application and it's not widely adopted by organizations.  Many companies simply purchase licensing for Dreamweaver and ignore the rest of the suite for their users (Fireworks is not a big draw and Flash is not used by many to justify the cost of the suite).  It's not cost effective for large organizations to buy the entire suite when only one application will be used.  Photoshop is much more mainstream in industry.  

The other issue to think about is the future of Fireworks.  If you visit Adobe's web site Fireworks isn't even listed in their product family on the front page of their site ::big eyes::  In the Academic Creative Suite 2.3 Dreamweaver is included, but not Fireworks or Flash.  http://www.sprysoft.com/creative-suite-premium-academic/p_293475.html  I think that this is the bundle our students are going to tend to buy because they value having Photoshop, Dreamweaver, and Illustrator (not to mention InDesign and Acrobat Professional).  So while we have Fireworks, I don't know that most of the current students will have this product at home.  It was also the recommendation of the advisory board to discontinue teaching Fireworks and teach Flash as an elective.  :/  I'm leaning towards purchasing the above academic bundle for the classroom  when the new Adobe Suite releases; it would be much more cost effective;  having to buy two bundles of software is extremely expensive for our program.

Hopefully Photoshop CS3 will deal with PNG transparency better, but then again how many organizations will immediately upgrade to the newest version when many are still using version 6 or 7?  Can't you remove the meta data from Photoshop; I seem to recall finding a fix for this.  

Yes, IE7 is out, but that doesn't mean that organizations will immediately jump on the IE7 bandwagon; you know this as well as I do. How many browser versions do you have installed on your system?     I've already heard of several large organizations who have blocked automatic install of IE7. Remember how long Netscape 4.7 lingered.  I was quite shocked today to view usage reports for the County Office of Education and 1% of users will using Netscape 2.0 - Yikes!  I'll have to see if I can get a copy of that data to share here.

I think what I'm trying to get at here is that we can't count on users having Fireworks or IE7.  So what do we do about IE6 since it's the predominant web browser?

If you would post some follow-up links on the limitations of the method that I posted that would be great.  There are other threads on the forum that I can repost with this thread tomorrow.  Maybe we can come up with consensus on the best method to recommend?

Just my 22 cents.

Robin

[Robin]

So I'm going to add a few articles and programs that I've found to this thread.


TweakPNG - Freeware utility - TweakPNG is a low-level utility for examining and modifying PNG image files. It runs on Windows 95 or higher (98, ME, 2000, XP, etc.). In order to use it, you will need to be at least somewhat familiar with the internal format of PNG files. http://entropymine.com/jason/tweakpng/  The TweakPNG software method is discussed @ http://phoenity.com/newtedge/png_degradability/

Gimp for Windows - Not the most intuitive interface, but it's free and it's supposed to handle PNG images the way IE6 likes them (maybe) http://gimp-win.sourceforge.net/ or GimpShop http://freshmeat.net/projects/gimpshop/

Above references found @ http://meyerweb.com/eric/thoughts/2005/09/01/clearly-impossible/

[webwiz]

[webwiz]

Good news! I came across some images I had prepared as background "fades" and saved as 8-bit PNGs. I don't remember which graphics editor I had used to create them, but I had rejected them. Not only did IE exhibit a color shift, but the "fade" was not smooth.

After using a free trial of PNGOut on the files, the fades looked as good in IE as in better browsers. In all cases, file size was reduced - usually by 10% or so, but in one case to one fourth the original size. Considering that I had saved them as PNGs only because the file sizes were significantly smaller than GIFs or JPEGs, the further size reduction was a pleasant surprise.

The tool is very easy to use. Just choose the Xtreme (slowest) category, and the default "chunks" setting (keep none). Then locate the files you need optimized and press the Start button. You can also process an entire folder of images at one go. So simple.

I have yet to try it out on 24-bit PNGs with alpha transparency. When I get back to class to use Photoshop, I will test to see how that works.

Stay tuned.

[webwiz]

Here's an update on this topic:

Using PNGOut on Photoshop PNG files with full alpha transparency works well. PNGOut protects you from deleting essential chunks, so leaving the "keep chunks" setting to the default "keep none" works fine, and reduces file sizes a lot.

Getting alpha transparency to work in IE 5/6 Windows is fraught with difficulty, as the earlier reference I gave points out. The alternative technique of using special preparation that gives IE 5/6 Windows 1-bit transparency seems to be the only bulletproof method, and likely works for background images. From recent discussion on that post, it looks like you can create such a composite image using Photoshop, but not as easily as in Fireworks or the GIMP. I have not seen a tutorial on this though.

For both foreground and background images, you can use an HTC file together with a blank GIF file. You must have your server set up to deliver HTC files with the correct MIME type to begin with though. For Windows xp SP2 the required MIME type is text/x-component.

Angus Turnbull, who originated this method, notes these limitations:

• Can't help IE versions prior to 5.5, sorry.
  
• Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that. In some cases this might be a feature, not a bug...
  
• The script detects the ".png" extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere.
  
• It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
  
• Background PNG images can't be tiled. This is a limitation of the IE filter.
  
• Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
  
• There may be a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.
  

I hope this gives some useful alternatives. Alpha transparency can be used to create some awesome effects. It can also save a lot of development time, as you don't need lots of image slicing with their precise positioning requirements, which as we well know is very hard to achieve cross-browser.

[Robin]

Thank you for the detailed update David.  I've stickied this topic for future reference.

Robin

[webwiz]

Here's an update to this thread:

It seems there is an option in Photoshop that strips out most of the cruft normally written as PNG meta data. This not only makes the file smaller, but reduces the color shift in IE. Not perfect, but you may like to read the article at Polar Bear Lamps.

[webwiz]

Did you know that PNG-8 also supports alpha transparency? Neither did I.

To round out this discussion of PNG graphics and Internet Explorer, you may like to read PNG8 - The Clear Winner on Sitepoint blogs.

The writer concludes:

[webwiz]

...
In case you intend to use Microsoft's AlphaImageLoader filter to support full-color (32-bit) PNG images in IE 5 and 6, do read Transparent PNGs Can Deadlock IE6 over at The Cozi Tech Blog.

Instead, you may like to consider Making ‘IE6-friendly’ PNG8 Images over at Sitepoint.

[webwiz]

I have not tried this, but a small amount of JavaScript, Unit PNG Fix is claimed to make nice with transparency for IE6.

New from Unit Interactive Labs.