home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Book HomeWeb Design in a NutshellSearch this book

21.7. Creating PNG Files

The good news is that there are quite a few tools out there for both PCs and Macs that can save files in PNG format. The bad news is that not many support special features such as alpha channel transparency or gamma correction. Furthermore, some programs that create PNG files do not compress them as well as they could (including Adobe Photoshop 4.0 and PaintShop Pro).

Table 21-2 lists PNG feature support in a number of popular graphics tools. For a more comprehensive list of image editing tools and graphics file converters that support PNG compression (as well as their known bugs), see http://www.libpng.org/pub/png/pngaped.html.

Table 21-2. Graphics applications that support PNG format

Application

Alpha-channelTransparency

Binary 8-bit Transparency

Multilevel 8-bit Transparency

Gamma Correction

Adobe Photoshop 5.5/ImageReady 2

Yes

Yes

--

--

Adobe Photoshop 4.0/5.0

Yes

--

--

--

JASC PaintShopPro 4 and higher[12]

partial

Yes

--

--

JASC PaintShopPro 3 [12]

--

Yes

--

--

Macromedia Fireworks 4.0[13]

Yes

Yes

Yes

--

Macromedia Freehand 8 and higher

Yes

--

--

--

Macromedia Freehand 7

Yes[14]

--

--

--

Adobe Illustrator 7.0 and higher

--

--

--

--

CorelDRAW 7 and higher

read-only

--

--

--

The GIMP

Yes

Yes

Yes

Yes

[12]PaintShop Pro 3 reportedly creates unnecessarily large palette files. This is fixed in Versions 4.0 and later.

[13]PNG is the native file format for Macromedia Fireworks and is supported in all versions.

[14]Freehand 7 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.

21.7.1. Fireworks (2 and higher)

Macromedia Fireworks 4 is currently the best commercial software for creating PNG graphics. Not only does it have the most efficient PNG compression among its competitors, it also supports all varieties of PNG transparency, including the coveted multilevel 8-bit palette transparency. Fireworks also uses PNG as its native source file format because of its lossless compression.

When creating a PNG in Fireworks, it is important to use the Export function rather than just saving the file (resulting in a Fireworks native PNG file with loads of extra data). The Export Preview dialog box (shown in Figure 21-2) allows you to choose 8-bit, 24-bit, or 32-bit PNG format. The 8-bit PNG option gives you the same controls used for GIF compression: palette selection, color reduction, dither control, and transparency.

Figure 21-2

Figure 21-2. Fireworks' Export Preview dialog box showing PNG options

In "PNG 8" mode, the transparency pop-up menu allows you to select from alpha channel or index (palette) transparency. Index transparency generally results in smaller file sizes and therefore is more appropriate for the Web. Note that there must be transparent areas in the original layered image; Fireworks merely preserves the transparent areas on export (including soft fades and anti-aliased edges).

Fireworks keeps the file sizes small as well, delivering on the PNG promise to be smaller than their GIF counterparts. For the image in Figure 21-2, with exactly the same settings, the resulting GIF weighed in at 11,187 bytes, while the 8-bit PNG was 10,287 bytes (an 8% savings). Of course, file size savings varies depending on the image type.

21.7.2. Photoshop 5.5/ImageReady (and Higher)

Photoshop has offered read/write PNG capabilities since Version 4. For the best results, use the optimization features in the "Save for Web" option in Versions 5.5 and higher. The same export features are available in ImageReady (the web graphics tool that comes bundled with Photoshop 5.5 and higher).

From the Save For Web dialog box (Figure 21-3), PNG-8 format has the same settings as a GIF image. Only binary transparency is available for 8-bit PNGs (the same on/off style as transparent GIFs) with the Matte tool for blending into the page background. Multilevel transparency can be preserved for 24-bit PNGs.

Unfortunately, Photoshop does not squeeze PNGs down as small as it could. For the image in Figure 21-3, with exactly the same settings, the resulting PNG was 11,666 bytes, versus the GIF at 10,789 bytes. Photoshop's PNG was 8% larger than its GIF, and 4% larger than the Fireworks-generated PNG. A detailed list of other PNG bugs in Photoshop is available on the official PNG web site at http://www.libpng.org/pub/png/pngaped.html.

Figure 21-3

Figure 21-3. PNG-8 options in Photoshop 6's Save For Web dialog box



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.