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.

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.geekpedia.com Andrei P.

    How about this? http://www.devpub.com/making-png-images-transparent-in-ie6-t2.html

    I’ve been using it successfully with all types of PNG files and transparency is just as smooth as in a PNG compatible browser. The only issue with it is that if you have a very large number of these graphics (at least a few hundred) and they all require transparency, the browser will hang for a while JavaScript does its thing and applies the alpha-blending.

  • Chris_lu

    If you don’t have Fireworks, you can use pngquant: a really good program to create 8 Bits RGBA PNGs…

    Personally, I prefer 8Bits RGBA PNGs that JavaScript to avoid these tricks slowing down browsers…

  • http://www.sitepoint.com AlexW

    How about this?

    Andrei, given the well-documented problems associated with the IE filter/JS solution, I certainly intend to avoid using it in 99% of my work.

    For me, the risk it presents in not just failing, but crashing IE6 users’ browsers is too great for the increase in image quality, not to mention generally 4 times the file size and a grey box in ie6.

  • Tom

    Very nice solution. Thanks for sharing it!

  • Myspace Layouts Resources

    http://free-myspace-layouts.co.cc/

    that’s really a fantastic post ! ! added to my favourite blogs list..

  • Free Article Resources

    http://www.setmax.co.cc

    that’s really a fantastic post ! ! added to my favourite blogs list. .

  • Go Media

    I hate IE6 as a web designer it is what causes most problems for me. We had lots of problems with the top part of our website Go Media because it uses a png over a striped background and it produced a horrible blue colour around the image.

  • http://onsman.com/ ronsman

    Thanks, Zofrex. That’s fixed.