Semi-Transparent (Dithered) GIF Slows IE

I recently had an odd page performance problem in IE6 & 7. The page redraw was quite slow on window resize and the page would react very slowly to mouse hover events. I spent hours investigating JavaScript bugs and possible mark-up issues with no success. In the end, removing a dithered GIF from the style sheet did the trick.

Once again, I was baffled by IE's shortcomings (did I mention all other browser's performed normally?) but had to move on and find a solution. I'm posting this article to take a break from ranting about IE to my co-workers and in the hopes that other frustrated developers might stumble upon this when trying to understand why a simple web page is performing so poorly in IE.

First, you might be wondering what I mean by a dithered GIF. It's a checker-board-like image that alternates between solid colour and full transparency. Below is an example of what this GIF "looks" like.



The grey squares represent fully transparent pixels (like only a GIF can do) and the white squares represent opaque pixels. The idea is that this image can be used as a tiling background image and allow images underneath it (from parent elements - think body background) to show through. This can create a nice effect and might sometimes be used to mimic alpha-transparency in PNGs when IE6 support is important. Or so I thought. Turns out the performance hit that IE 6 & 7 users take don't really make this a viable option.

I'm not sure why IE performs so poorly when using the dithered GIF as a background image but a pretty good solution was to replace the GIF with a white PNG that had its opacity set to 50%. This solved the IE performance problems and the real alpha-transparency looked better in IE 7. The only problem was that IE 6 rendered the PNG as solid grey. To fix this the star hack came in handy to set the background colour to solid white. The slight alteration to the page's design was far outweighed by the performance boost so this made the solution quite acceptable.

Alternative Solutions that Didn't Work

• Reproducing the dithered GIF in the PNG format (keeping the binary transparency) does not improve performance
• Adding full PNG support to IE 6 through the HTC file does not work on background images
• Although it is possible to set a background colour for a PNG (I believe for the purpose of degrading when alpha-transparency is not supported), IE 6 ignores the setting and just defaults to grey

And there you have it. Hopefully this was helpful or at least interesting. If you have any insight into why IE performance is negatively impacted by the dithered GIF, please share.