Optimizing PNG File Size 301
PNG
Optimizing PNG File Size
Web Design in a Nutshell, eMatter Edition
To create a 24-bit PNG with variable transparency, check the Transparency
checkbox and make sure the Matte menu is set to “No Matte.” 24-bit PNGs are
automatically saved with 256 levels (8-bit) transparency.
For 8-bit PNGs, variable transparency is handled differently, so you must specify
the number of levels of transparency you’d like the image to have (between 1 and
256). If your image contains a gradient, the number of levels of transparency can
control banding effects in the transparency. (Note, Fireworks does not offer a
control for setting the number of levels of transparency.)
Each transparency level for each affected color occupies a slot in the image Color
Table. The transparency information is based on the information in the layered
image. Therefore, if you know you want an object or layer to have a specific trans-
parency level, set the opacity of the layer in the original image before optimizing.
When you are finished with the Optimize settings, choose “Save Optimized” from
the File menu and name the file with the.png suffix.
Optimizing PNG File Size
Unfortunately, at the time of this writing, PNGs are so poorly supported by both
browsers and production tools that there isn’t enough practical experience avail-
able to suggest any optimizing strategies.
For Web use, PNGs will be an alternative for indexed color images, and we may
find that following some of the same image-creation guidelines used for GIFs may
aid in minimizing PNGs as well.
24-bit RGB images are best saved in JPEG format for use online, but if you are
saving them as PNGs and are interested in keeping them as small as possible, you
are basically limited to selecting the best compression filter. Greg Roelofs, one of
the developers of the PNG format, describes this process as “more of a black art
than a science.” As mentioned earlier, the recommended filter choices are None
for indexed-color images and Adaptive for everything else. Use “level 9” (or
“max”) compression regardless, and don’t use interlacing if you want maximal
compression. Adding interlacing to any PNG will increase its file size.
If you are serious about optimizing PNGs, you should download Glenn Randers-
Pehrson’spngcrushapplication ($7 shareware, available athttp://www.netgsi.com/
~glennrp/pngcrush/). It is a command-line DOS application, but it can run in batch
mode. This tool comes highly recommended by Greg Roelofs.
Figure 16-4: Adobe ImageReady Optimize dialog box for PNG-8 (left) and PNG-24
(right)