Web Design in a Nutshell, 3rd Edition

Alpha channel transparency

In addition to the standard channels for RGB color values for Truecolor images, PNGs may contain another alpha channel used for transparency information. Each pixel is then defined by its RGBA values. For 24-bit images, the alpha channel can contain up to 8 bits of information for 256 levels of transparency for every pixel in the image (resulting in a 32-bit image). The alpha channel may also contain simple binary transparency information, like GIFs. Keep in mind, however, that an RGB PNG file with alpha channels will be about 20% larger than one without.

Figure 31-1. A PNG with variable transparency and how it looks in a browser (IE 6) without alpha channel support (right)

Not all browsers have native support alpha-channel transparency, most notably Internet Explorer 6 and earlier (see the sidebar "Alpha Transparency in Internet Explorer" for workarounds). Figure 31-1 shows what happens when transparency is not supported. It is interesting to know that 48-bit PNGs may contain an alpha channel with 16 bits of information—that’s over 65,000 levels of transparency. 48-bit images, however, are inappropriate for the Web and are poorly supported elsewhere.

Alpha Transparency in Internet Explorer

Although IE 6 and earlier do not have native support for multiple levels of transparency, there are solutions using Microsoft’s proprietary AlphaImageLoader filter and a ...