Why does IE get PNG images quite so wrong?

November 26th, 2007

Now I have avoided using transparent PNG for a long time despite its various advantages such as having a real alpha channel that can produce smooth, anti-aliased edges and having a proper amount of colours instead of 256, mainly because of IE6. But I have been testing for IE7 for a while now and I knew the issue of PNGs and the handling of their transparency is supposed to be fixed so I reasoned that I could design with PNG transparency in mind and worry about fixing it for IE6 later.

So at the top of my page, an area that is pushing boundaries anyway by being dynamically resized via flash and javascript, I wanted a nice curved appearance instead of boxes, so that I could reveal more of my page’s background image. Below is a comparison between the way IE7 and Opera treats my curved transparent top (I’m afraid this might be difficult to see on some monitors with low contrast):

When I view it across my four test browsers, IE7 displays a significantly darker image than the others. But wait, this gets weirder. More annoyingly I find is that while IE7 was getting it noticeably wrong (#181818 as #111111), Opera, Safari and Firefox are also rendering the colour which should be #181818 as #171717, but this only becomes apparent when I take a screenshot of the page.

Some information on PNG

I think I shall go back to designing without PNG transparency in mind.