HTML & CSS
Article

PNG32 hacks and IE6. Is it worth it?

By Alex Walker

Last year you might remember me running through what I thought were the under-appreciated qualities of an image file format that seems to slip under the radar — the PNG8.

Namely:

  1. Small files sizes
  2. Graded alpha-transparency in all current browsers
  3. No requirement for potentially brittle hacks requiring JavaScript, ActiveX and/or other proprietary technologies.

Although, admittedly, you had to be prepared to slightly lower your expectations of the render in IE6, we considered the trade-off generally worthwhile — particularly as you begin to hone your skill for producing PNG8 images that degrade nicely in IE6. Personally I haven’t ruled out using PNG32 in certain situations, but PNG8 is certainly my weapon of choice.

Bearing this in mind, it was great to read a really interesting post on PNG32 hacks and IE6 by George Reilly on the new Cozi Tech Blog. For a little background, George spent seven years working on IIS at Microsoft, and as such has two things most of us can’t claim:

  1. an array of hard won Microsoft ninja debugging skills
  2. a black book of Microsoft contacts to quiz about nonsensical IE6 voodoo

Nevertheless after deploying the time-honored IE6 PNG32 hack in a project, they spent the following months battling consistently inconsistent browser hangs.

The problem went away for several weeks, but in late October, it came back with a vengeance, recurring multiple times a day. Some machines seemed immune, some could repro it with almost 100% success. There was no obvious commonality; it reproed on several builds of IE6. It had to be fixed: we could not ship a web application that sometimes hung IE6 hard.

This has to be almost the ultimate debugging nightmare: An issue serious enough to wreck the application — i.e. enough to make the user force kill their browser — but one that appears to choose its victims either via tea leaves or the daily horoscope column.

Even Microsoft’s own attempted solution — preloading the images via JavaScript — was of no use in context of their particular application. In the end, George and his team decided enough was enough.

We have since decided that we will no longer make heroic efforts to get our web application looking just as good on IE6 as it does in modern browsers. Quite apart from the extraordinary amount of pain we endured in the Affair of the Transparent PNGs, fighting with IE6 has been a huge timesink for us, especially when it comes to working around its CSS bugs.

When you consider that many of us may have been building this kind of problem into sites without ever knowing it — hey, a bug report comes in, you shrug and explain it’s probably something they installed — it has to make you think twice about using PNG32 while IE6 is still a consideration.

  • Matt Wilcox

    This sounds horribly familiar! Only last month did I spend three solid days debugging an IE6 complete crash bug – a completely random crash with an error in mshtml.dll. But I didn’t boil it down to PNG, it seemed to be dependent on an @import (of anything) and the print stylesheet preceeding the screen stylesheet. I have a blog entry, video of the bug, and test case files if anyone’s interested:

    http://mattwilcox.net/archive/entry/id/963/

  • jim

    Someone is still pandering to M$?!?! IMHO, if anyone is still using IEx, they deserve every crappy display defect. M$ IEx is strictly LCD (as in lowest common denominator) software. It should be relegated to tasks it is better suited to … like displaying text files for preschoolers … oh, wait, even they’re beyond that by now, eh!

  • http://www.sitepoint.com AlexW

    Someone is still pandering to M$?!?! IMHO, if anyone is still using IEx, they deserve every crappy display defect. M$ IEx is strictly LCD (as in lowest common denominator) software. It should be relegated to tasks it is better suited to … like displaying text files for preschoolers … oh, wait, even they’re beyond that by now, eh!

    Gee, your clients (assuming you have them) must love you, Jim.

    “Your users are stupid. I don’t like 30-40% them and I don’t care what your paying me. It’s time they learned a lesson and I’m going to use your business/organisation to teach them it!”

  • Gavalian

    People where you took PNG32 ? what is that format ?
    I haven’t meet it anywhere, i use CS3 and there is no PNG32 there.

    Levon.
    Gavalian Web Design Studio Glendale, CA

  • Louis

    I think sometimes a simpler solution to this problem is to just re-cut the image as a JPEG (with the proper gradient, background, etc). Then, stick the image into a background on a DIV, and call the JPEG with a IE6 only CSS hack, or conditional. Obviously this isn’t going to work in every instance — and it’s not very future-productive — but I think it’s a lot faster than the tedious explanation given here.

  • emil

    people should think twice before they use an obsolete 6-year-old browser

  • http://www.design.rockinlinux.com rockinlinux

    I like png’s, small file size, good quality. I use them when no transparency is required. When transparency is required i never use them…i try to keep crazy hacks to the min.

  • http://www.design.rockinlinux.com rockinlinux

    Emil!! +1 on that!

  • Justen

    On the contrary, maybe all designers should make it a personal objective to use this hack more often, in the hopes that most of the web will become unreliable to IE6 users and they will finally have to get off their asses and spend the 10 minutes it takes to download a new browser.

    Corporate intranets running IE6 oriented web apps, you say? Gasp gasp! Firefox to the rescue! Get on it, IT. You shouldn’t be letting your corporate hordes loose on the world wide web with a gaping black hole of security like IE6 anyway, you’re just creating more work for yourselves – not that they should be spending time browsing the web anyway. Here’s good news: it’s a pain in the ass to get activex (the world’s friendliest trojan welcome mat) working in Firefox!

  • giladfit

    png transparency can be gained by using AlphaImageLoader filter.
    or even do it using behavior such as the one here http://webfx.eae.net (even tough it has several bugs that I have fixed)

  • http://www.starnix.org zodiaclove

    Hello
    I can’t agree with what you wrote really….
    please explain further a bit more for me :d

    thanks

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.