A Complete Guide to Web Design

298 Chapter 16 – PNG Format

Creating PNG Files

Web Design in a Nutshell, eMatter Edition

Adobe Photoshop (4.0 and higher)

Photoshop supports the PNG format, but it is notoriously inefficient at

compressing files. In most cases, PNG files will be larger than a GIF file of the

same image. It does offer alpha channel transparency (for 24-bit RGB images only)

and some gamma support, but gamma handling appears to be implemented

incorrectly.

Saving as a PNG

To save a file in PNG format, select PNG from the Format pop-up menu when

doing a “Save As.” The PNG Options dialog box (shown in Figure 16-2) allows

you to turn on or off interlacing. You can also select a compression filter from the

following choices (descriptions of each appear earlier in this chapter): None, Sub,

Up, Average, Paeth, or Adaptive. If your image is an RGB or grayscale image,

“Adaptive” may be the best selection for optimum compression. If your image is

an Indexed Color image, it is recommended that you set the filter to “None.”

Adding transparency

Transparency information is indicated by an Alpha Channel, which you will need

to create manually (unlike with GIF files, for which Photoshop generates an alpha

channel automatically based on a pixel color selection).

The parts of the image corresponding to black areas in the channel will be totally

transparent when the image is viewed in a browser. Remember PNG supports vari-

able shades of transparency, so you can make selections with feathered edges and

use gradient fills. Shades of gray in the alpha channel correspond to differing

amounts of transparency (the darker, the more transparent).

Adobe Illustrator 7.0 and higher X — — — —

CorelDRAW X — — — —

(^1) Photoshop’s inclusion of individual filter options is not necessarily a beneficial feature, since
only two are useful and the rest are confusing. Photoshop stores both gamma and chrominance
information, although gamma is only correct in 4.0 if the ambient is “medium”; in 5.0, gamma
is reportedly always incorrect.
(^2) PaintShop Pro 3.0 reportedly creates unnecessarily large palette files. This may be fixed in
versions 4.0 and later.
(^3) PNG is the native file format for Macromedia Fireworks.
(^4) Freehand preserves Alpha Channel information when 32-bit depth and Save Alpha Channel
options are selected during export. It does not provide a way to create an Alpha Channel.
Table 16-2: Graphics Applications that Support PNG Format
(as of October, 1998) (continued)
Application Read/WriteCompressionFilter OptionsAlpha-ChannelTransparency8-bitTransparencyGammaCorrection