PNG Transparency Tests
Transparency for Web images is not well understood by most graphics artists and Web people, so this test page needs to begin with some background on the subject.
Single-color transparency
Most people are familiar with the type of transparency that pallete-based image formats such as GIF and 8-bit PNG offer (Photoshop calls this “hard-edged transparency” or background matting). With this type, one of the colors in the pallette is marked as transparent. Often it is white, but it could be any color, including black, green, or periwinkle. Once the transparent color has been chosen and transparency turned on, all pixels in that image with that specific color will become transparent.
Some image editors confuse the issue by enabling the user to specify a percentage difference from the specified color (which is typically chosen with an “eyedropper”), making it seem that multiple colors can be chosen. Wrong—all this does is convert all pixels that fall in that range to the same RGB value as the one picked with the eyedropper. This is easy to accomplish, but creates some shortcomings, the largest of which involves the case where an anti-aliased area juts out into a transparent area. Single-color transparency just does not cut it here, witnessed by the two images below.
In all of these cases, the red checkmark was antialiased in a graphics editing program. In the top image, this was done against a white background, and the result looks smooth, but it stands out when placed against any background color other than plain white.
In the second image, the artist specified an alpha mask, with some of the pixels having 100% transparency (the background on the right), and others (the shades of red on the edge of the checkmark) having varying levels of transparency, likely between 50% and 80%). Internet Explorer normally completely ignores alpha transparency on PNG images, but in this case, it ignores only the partial transparency (thus dropping out the anti-aliasing), leaving the 100% transparency so the background color bleeds through. Netscape Navigator 6.1 displays both levels correctly.
The third image is one I created by modifying the original image of the second. First, I removed all transparency, replaced the resulting area of white around the checkmark (but not the lighter red fringe) with green, converted the image from 24-bits down to 8, and then marked the green color as the transparent color. Notice that the red checkmark is restored to its proper size, but now has white and pink fringes around it. This is the best you can do with a pallete-based image and single color transparency, and explains why you must match the anti-alising of images to the background color you will actually be using. Interestingly, while IE displays this correctly, Netscape 6.1 doesn't, completely ignoring the transparency.
Alpha-channel transparency
What would be ideal in this case, and what the artist intended, is to specify 100% transparency for the background area around the right edge of the checkmark, with a lower percentage transparency for the shades of red on its fringe, so that these pixels let the background color bleed through. This partial transparency is often called “alpha masking”, and is the only way to anti-alias against a transparent background and have the result usable no matter what the actual background color winds up being.
To accomplish this on the web, you can't use JPEG images, because the format doesn't support any kind of transparency. You can't use GIF, since it supports only 256 colors and only single-color on/off transparencty. That leaves us with PNG, which supports single-color on/off transparency (as I used in the bottom image above) as well as alpha-channel masking, which is what we really need in this case. But as you might have guessed, in Webland this doesn't really work how it's supposed to in most browsers. Internet Explorer gets it wrong on Windows, Netscape 4.x on all platforms really gets it wrong, and only Netscape 6.x and Mozilla get it right.
To create an image with alpha transparency, you need to use a package capable of it, and capable of saving the correct type of PNG file. Modern versions of PhotoShop will work (I used 6.0 on Windows for this article), as will many other programs.
[an error occurred while processing this directive]