Prevent white noise from appearing in images after fading

Heads up! This post was written in 2009, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.

— Cory

The first time I ever saw this alleged bug was in Internet Explorer 7 yesterday. Images were rotating on a page in the form of a slideshow, fading in and out for a nice, smooth transition. One problem, though: in Internet Explorer 7 (and 6, as it turned out), one of the images would appear with a small cluster of white pixels around the black areas.

To make sure the image wasn't corrupt, I saved it again using PhotoShop. No luck. Even after saving the image as a GIF instead of a JPEG, the white noise persisted in IE.

Luckily, some research resulted in finding Alex Judd's post, which provided a relatively simple solution to the problem.

To summarize, the white noise occurs in both IE6 and IE7 on some (but not all) images when they fade in or out. This is especially true when you're using a JavaScript library such as jQuery or script.aculo.us.

Evidently, IE mistakes some of the true-black pixels for transparent pixels, which causes the "white" noise (which may not necessarily be white, depending on the underlying background). One work around, as Alex points out, is to adjust the levels of the image in Photoshop very slightly—just enough to eliminate the true-black pixels.

To do this, open the image up in PhotoShop and perform the following steps:

1. Select Image, Adjustments, Levels
2. Move the Output Levels slider a few pixels to the right (or type in a small number, like 5)
3. Save the image

In most cases, there won't be a noticeable difference in color. Alas, this work around does solve the display problem in IE, but not without tampering with the original image. We'll have to keep our fingers crossed in that IE8 finally addresses this issue.