Monday, April 30th 2007

White noise jpg fading problem in Internet Explorer 6
posted @ 5:23 am in [ Javascript -Prototype Library -Technology -Web Design -Web2.0 ]

You wouldn’t believe it was true, but there is an incredibly annoying problem in Internet Explorer 6 (IE6) where fading out jpg images using nice libraries like or prototype.js gives a strange ‘white noise’ effect on the image during the transition.

Well, it turns out it is actually a bug in IE6 where it takes true-black colours in JPG images to be transparent, and thus shows the background colour behind it when fading the image (in our case white).

So how to work around it?

Easy – go into Photoshop and adjust the levels to remove the true black in the image – Image -> Adjustments -> Levels and slide the true black slider 1 or 2 pixels to the right. Save out your image again and the jpg artifacts are gone.

Weird but true! and here’s the pointer I found to solve the problem from a Slimbox forum

– SNIP –

“white noise”: After making some tests with images showing the problem, I’ve come to the conclusion that:

– It is NOT related to the software generating the images.
– It shows in totally black areas of a jpeg image in Internet Explorer only.

It’s like the black portions of the images are interpreted as transparent by IE, so the background color (white by default) shows through them. So far I’ve only seen this happening in Internet Explorer (both IE6 and IE7). Thank you Microsoft for making the lives of web designers and programmers so fun.