Making ‘IE6-friendly’ PNG8 Images

Share this article

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.

The Problem

Two images- foreground PNG8 to be places over the blueprint background

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.

Nice edges in modern browsers

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).

Ouch!  The render in IE6 is a show-stopper

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.

The Approach

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.

Matched corder colors

In the diagram above, I:

  1. First duplicated the main yellow shape on top of the original
  2. Set its fill color to ‘clear’ so the original shape shows through
  3. Set it’s border color to the background blue
  4. Used the knife tool in Fireworks to break the new border into 4 separate lines. This allows me to color each border color separately.
  5. 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.

Final Graphic

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.

Final Ssreencaps

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.

Summary

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.

Originally published in Design View #43.
Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week