Making ‘IE6-friendly’ PNG8 Images
For all the recent buzz and bubble generated by the IE8 beta, the slightly depressing reality is that IE6 is still going to be occupying more of our thoughts (and nightmares) for the foreseeable future. Even as IE7 has begun to gain marketshare, I can’t say I’m spending any less time writing IE6-specific code than I was, say, two years ago. Sad but true.
Likewise, if we ever thought we’d encountered all demons IE6 had to offer, we were mistaken there too, as George Reilly recounted in an interesting read last week.
Despite the fact that George draws upon seven years of ‘Microsoft insider’ experience, he spent 5 months trying to eliminate persistent, ‘app-killing’ IE6 browser hangs when using the garden-variety PNG32 alpha-transparency hack.
The fact that even he eventually admitted defeat and converted his images to PNG8 could be viewed as a sobering lesson for us all. Can you be 100% sure your PNG32s aren’t locking up at least some of your IE6 users’ browsers?
Of course, these things are often a trade off.
- Do you go for higher quality PNG32 images for most IE6 users, and accept the fact you may well be forcibly taking down a percentage of those users?
- Or do you play it safe with PNG8, but have to grudgingly accept often ugly, blocky image edges in IE6?
It’s seem like a question of the devil and the deep blue ‘e’.
Today I thought I might run through one of the approaches I’ve been taking to improve those images in IE6.
Let’s take a relatively simple example that you might recognize from the site at the moment.
On the left we have the post-it note graphic (a partially transparent PNG8) that we intend to overlay on the blueprint background on the right.
As we might expect, in all modern hip’n’groovy browsers we get a smooth, blended edge between the yellow post-it note and blue back. The magnified section shows a pallete of maybe a dozen yellows, blues and grays working together to create the illusion of a gentle clean transition (live example to test here).
Unfortunately the same images rendered in IE6 (and lower) are a major disappointment and, in my opinion, a show-stopper.
The problem is all the semi-transparent yellows and shadow grays that blended with the blues to create ‘inbetween colors’ have been rendered 100% transparent by IE6. Our pixels are either yellow or blue — not halfway between.
To be fair, it’s true that as complementary colors in this example represent an absolute worst case scenario — ‘diagonal bright yellow on blue’. Nevertheless, worst case scenarios happen all the time, so we still need to be able to generate a more acceptable result.
While we’re never going to be able to reproduce the transparent shadow in IE6, we do need a way to generate a lot more of the yellow/blue blending colors along the edge. I’ve found the easiest way to do this is to bring a tiny slither of the background inside our yellow shape.
In the diagram above, I:
- First duplicated the main yellow shape on top of the original
- Set its fill color to ‘clear’ so the original shape shows through
- Set it’s border color to the background blue
- Used the knife tool in Fireworks to break the new border into 4 separate lines. This allows me to color each border color separately.
- Exported the graphic
Of course, you could choose to simplify the process by applying the border to the actual note, but keeping the border on a separate shape gives you more freedom to re-color each edge if you need to.
This is the final IE6-friendly PNG8 graphic and here’s an example of it used in front of the blue background for your own browser testing pleaure.
Finally, here are a few browser screencaps I prepared earlier.
As you can see, there’s no tangible loss of image quality in Firefox — or any modern browser for that matter. The transparent shadow is still as smooth and useful as ever.
However it’s clear the result in IE6 is light years ahead of our initial result. There’s no shadow, but the edge is as crisp as we could possibly want.
As you may have already realized, this is more of a ‘general approach’ to better PNG8s than a magic bullet for all your PNG8 woes. It’s certainly true that by ‘baking’ our graphic into a particular background color, we are permanently reducing it’s flexibility. There are going to be some occasions where this method isn’t an option.
But just as surely, there will be many situations where this method (or variations on it) will help you turn chunky, unsightly, unusable IE6 renders into perfectly acceptable results.
Hope you get some use out of it.