Special Features (Web Design in a Nutshell, 2nd Edition)

21.6. Special Features

You may choose to use a PNG (in that perfect world) for some of its advanced features that no other graphic offers, such as variable transparency levels and full color management systems for automatic image correction, including gamma and color balance corrections.

21.6.1. Interlacing (Progressive Display)

Like GIFs, PNGs can be encoded for interlaced display. When this option is selected, the image displays in a series of passes, the first displaying after only a portion of the file has been downloaded, and each subsequent pass increasing in detail and clarity until the whole image is rendered.

Interlaced PNGs display over a series of seven passes (using a method known as "Adam7," named for its creator, Adam Costello). The first rendering of the image appears after only 1/64 of the file has downloaded (that's eight times faster than GIF). Unlike GIF, which fills in horizontal rows of information, PNGs fill in both horizontally and vertically (the effect looks more like the display of progressive JPEGs). Interlacing can add to the file size of PNGs, especially on small images (which don't really need to be interlaced anyway). To keep file sizes as small as possible, turn interlacing off.

21.6.2. Gamma Correction

Briefly stated, gamma refers to the brightness setting of a monitor (for more information on gamma, see Chapter 3, "Web Design Principles for Print Designers"). Because gamma settings vary by platform (and even by manufacturer), the graphics you create may not look the way you intend. In general, graphics created on Macs look dark on PCs and graphics created on PCs look washed out on Macs.

PNGs can be tagged with information regarding the gamma setting of the platform on which they were created. This information can then be interpreted by software on the user's end (the browser) to make appropriate gamma compensations. When this is implemented on both the creator and end-user's side, the PNG retains its intended brightness and color intensity.

21.6.3. Transparency

Both 24-bit and 8-bit indexed color PNGs can have variable levels of transparency. This sophisticated transparency function allows for smooth transitions between foreground and background elements. Grayscale images can also have variable transparency. PNGs can also use simple binary transparency (like transparent GIFs), in which a pixel is either totally transparent or totally opaque.

PNGs handle transparency in two ways: using an alpha channel (think of it as a separate layer that keeps track of the transparent areas of the image) or adding transparency information within the index color table for 8-bit palette images. The 8-bit palette transparency results in smaller file sizes for the same effect and is preferable for Web use. Both methods are discussed further below.

As of this writing, the only common tools that allow you to create transparency information in PNGs are Adobe Photoshop (4.0 and higher), Adobe ImageReady, Macromedia Fireworks, the GIMP (an image-editing tool for Unix, Linux, and OS/2), and PaintShop Pro (4.0 and higher). Photoshop currently supports only 24-bit transparency, which results in unacceptably large files. ImageReady and Fireworks both support the more complicated 8-bit, palette-based transparency.

Transparency techniques are discussed in Section 21.7, "Creating PNG Files" section of this chapter.

Bear in mind that even if you manage to make a PNG file with transparency, it may be a challenge finding a browser to display it correctly (particularly the preferable 8-bit indexed color transparency). Refer back to Table 21-1 for browser support information.

21.6.3.1. Alpha channel transparency

In addition to the standard channels for RGB color values for truecolor images, PNGs may contain an additional 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. 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.

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.

In practical terms, this means you can create glows and soft drop shadows that allow background patterns and underlying images to show through in a realistic manner. Figure 21-1 illustrates the effect of graphics showing through areas with variable levels of transparency.

Figure 21-1. Variable transparency allows PNGs to blend with background patterns

21.6.3.2. 8-bit transparency

Indexed color PNGs can also contain variable levels of transparency (up to 256 levels); however, this information is not handled in a distinct alpha channel as for 24-bit images. Instead, transparency information for each color occupies positions in the color table. So, if you have a red area that fades out using eight levels of transparency, that red would be present in eight slots in the color table, each with its own transparency setting. In other words, each slot in the color table can store RGBA information. Other than adding to the number of pixel colors in the color table, adding transparency to an 8-bit PNG does not significantly increase its file size, making it the way to go for web graphics where file size is crucial.

21.6.4. Embedded Text

PNGs also have the ability to store strings of text. This is useful in permanently attaching text to an image, such as copyright information or a description of what is in the image. Unfortunately, the only browser that supports embedded text is Internet Explorer 5 for the Mac, but someday it may be available via a right-button context menu or some other method on all browsers and platforms. The only tools that allow text annotations to PNG graphics are Paint Shop Pro and the GIMP (a free image editor for the X Windows system on Unix). Fireworks will preserve embedded text information in PNGs.