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:
- Small files sizes
- Graded alpha-transparency in all current browsers
- 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:
- an array of hard won Microsoft ninja debugging skills
- 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.
Related posts:
- 5 Reasons to Avoid CSS Hacks and Conditional Stylesheets CSS hacks and conditional style sheets can cause more problems...
- Microsoft Encourages IE6 Upgrades With Charity Donations Download IE8 and Microsoft will donate $1.15 to charity. If...
- Microsoft to Support IE6 Until 2014 Microsoft has confirmed its commitment to support Internet Explorer 6...
- 101 Essential CSS Tips, Tricks & Hacks The team at SitePoint is pleased to announce a new...
- 10 Fixes That Solve IE6 Problems Is IE6 causing you grief? Fortunately, Craig has 10 possible...
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/
March 11th, 2008 at 6:39 pm
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!
March 20th, 2008 at 10:46 am
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!”
March 20th, 2008 at 11:01 am
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
March 20th, 2008 at 5:27 pm
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.
March 24th, 2008 at 12:29 pm
people should think twice before they use an obsolete 6-year-old browser
April 7th, 2008 at 1:59 am
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.
April 25th, 2008 at 9:41 pm
Emil!! +1 on that!
April 25th, 2008 at 9:42 pm
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!
May 1st, 2008 at 1:48 pm
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)
May 28th, 2008 at 6:44 pm
Hello
I can’t agree with what you wrote really….
please explain further a bit more for me :d
thanks
September 29th, 2008 at 5:05 am