PNG Optimization

PNG, or Portable Network Graphics, supports indexed, true- color up to 48-bit RGB, and grayscale modes. ^[10] I don't recommend using true-color PNGs on web pages, although they are excellent for archiving original images, and some programs (such as Fireworks) use them as their main file format.

^[10] Thomas Boutell, ed., "PNG (Portable Network Graphics) Specification, Version 1.0," [online], (1996), available from the Internet at http://www.w3.org/TR/REC-png.

Because most PNGs used on the web are in index-color mode, many of the same techniques you learned in the "GIF Optimization" section apply to optimizing PNGs. Influencing histograms, weighted optimization, and minimizing bit depth all work on PNGs as well as GIFs.

Deflate Compression for PNGs

PNGs use the "deflate" compression algorithm typically with a 32KB sliding window (PNG decoders can handle window sizes as small as 512 bytes). Deflate is a newer , more efficient cousin of LZW, which is designed to be free of patent problems.

Deflate is a variant of the LZ77 algorithm used in zip programs like WinZip, PKZip, ZipIt, and gzip . ^[11] , ^[12] Originally created by Phil Katz for version 2 of his PKZip tool, Deflate combines LZ77 with Huffman coding. Deflate typically compresses files 20 to 30 percent more than LZW, which is the same difference you'll find between gzip and compress on Unix systems, and PKZip 1 and PKZip 2 on Windows.

^[11] L. Peter Deutsch, "DEFLATE Compressed Data Format Specification Version 1.3," RFC 1951 [online], (Alladin Enterprises, 1996), available from the Internet at http://www.ietf.org/rfc/rfc1951.txt.

^[12] Jacob Ziv and Abraham Lempel, "A Universal Algorithm for Sequential Data Compression," IEEE Transactions on Information Theory 23, no. 3 (1977): 337343.

Some PNG compression tools have an optional "compression ratio" with values ranging from one to nine. Six is the default. Nine is almost always the best setting; it will save you a few percent off your file size . This is similar to the compression settings for gzip compression you will read about in Chapter 18, "Compressing the Web." Pngcrush can help you find near-optimal settings for PNGs and outputs somewhat cryptic diagnostics on which settings work best (http://pmt. sourceforge .net/pngcrush).

Minimize Bit-Depth

Like GIFs, PNGs are a palette-based format. The size of PNGs is directly related to the size of the color palette. Try to stay under powers of two when reducing colors. PNG palettes also can be truncated, although GIF palettes are always a factor of two.

Avoid Interlaced PNGs

PNGs use a seven-pass two-dimensional interlacing scheme, with the first pass displaying 1/64 of the image data. PNG's superior two-dimensional interlacing scheme only stretches pixels by 2 on the first pass. Greg Roelofs estimates that embedded text is readable approximately twice as fast in an interlaced PNG versus a GIF (see http://www.libpng.org/pub/png/pngintro.html ) .

PNG's creators claim that interlacing "slightly expands the file size on average," ^[13] although the increase can be as large as 20 to 35 percent. For this reason, I don't recommend interlacing PNGs unless the increase in file size is small.

^[13] Boutell, "PNG Specification" [online].

Transparency Gotchas

Transparency is often essential to make web sites look professional. There are two types of transparency:

• Transparent color-based, for indexed color images

• Alpha channel-based , for full-color images

GIF supports the first typeevery pixel can be either transparent or not. PNG supports transparent color-based transparency for indexed color mode and alpha channel for true-color mode. With alpha channel, every pixel can have an individual level of opaqueness. Alpha channels can make a web designer's life easier, but what about file size and browser compatibility?

File size is not an issue; alpha channels usually don't make the file much larger.

Browser compatibility is an issue, however. Mozilla and Netscape support PNGs with alpha channels (see Figure 12.10), but Internet Explorer 6 does not (see Figure 12.11). That is why I do not yet recommend using transparent PNG images on web pages.

Figure 12.10. Transparent PNG in Mozilla 1.1.

Figure 12.11. Transparent PNG in Internet Explorer 6.

Use Filters for Better Compression

PNGs can run image data through a series of filters to make them more compressible . PNG runs your image data, scanline by scanline, through one of five filters (Sub, Up, Average, Paeth, and Adaptive). Each scanline can begin with a different filter type byte, allowing adaptive filtering. Up, Average, and Paeth filters work in two dimensions, and the others work in one dimension. Indexed color PNGs (8 bits or less) usually do not benefit from filtering, so use "none" when there is a choice. For true-color or grayscale images, use Adaptive.

For all formats, make sure that your original is as clean as possible. Run any necessary filters (despeckle, dust, and scratches), and manually remove any remaining stray pixels with cloning tools.

PNG versus GIF

An image with the same palette and dithering will usually have a similar size as a GIF or a PNG. Many times PNGs will be 5 to 25 percent smaller, but sometimes they can be larger. Table 12.1 shows file sizes created by different tools using the same image (see Figure 12.12). All the files are in non- interlace mode and have the same 16-color palette.

Figure 12.12. Optimizing a sample web imagea toolbar.

Table 12.1. Comparing GIF and PNG: Tools and File Sizes (Bytes)

Tool	GIF	PNG
ImageReady 7	4,155	4,142
Fireworks MX	3,932	3,246
Web Image Guru 4	3,973	3,076
IrfanView 3.75	4,540	3,635
Pngcrush	N/A	3,076 (from WIG)

As you can see, different programs create different file sizes for GIFs and PNGs. PNGs are usually smaller than GIFs, but this is true only when they are created with the proper tool. Table 12.2 shows how the first three programs fare with our worst-case quantization scenario test balloon for both Perceptive and Adaptive palettes.

Table 12.2. Quantizing a Full-Color Balloon into GIF and PNG (in Bytes)

Tool	GIF (Perceptive/Adaptive)	PNG (Perceptive/Adaptive)
ImageReady 7	9,121/9,301	9,740/9,934
Fireworks MX	N/A /9,584	N/A /8,085
Web Image Guru 4	10,152/9,878	8,371/8,210
Pngcrush	N/A	8,094 (from FWMX)

NOTE: Note that the Perceptive palette gave better results, but only Adaptive was available on all programs. Note also that Pngcrush, which can reduce existing PNGs, could not reduce Web Image Guru's PNG any further, and actually made the PNG created by Fireworks MX slightly larger than our test balloon.

Fireworks and Web Image Guru created smaller PNGs than ImageReady, and ImageReady actually created larger PNGs than GIFs. The Perceptual palette created the least banding for this smooth-toned image. ImageReady and Web Image Guru created the best-quantized GIFs, although ImageReady's version was smaller. Guru's unique smoothing feature (available for GIFs, JPEGs, and PNGs) improved the image even further (see Figure 12.13). Web Image Guru from VIMAS combines all web formats into one filter. It offers fine-grained control, including seven filters for GIFs, JPEGs, and PNGs.

Figure 12.13. Web Image Guru in actionsmoothing a GIF in Windows.

PNG Optimization Summary

Because GIF and PNG are both palette-based formats, many of the same techniques you learned in the "GIF Optimization" section also work on PNGs. Because PNGs use a similar dictionary-based algorithm with one- and two-dimensional filters, the strategy for PNGs is a little different. Maximize horizontal and vertical pixel pattern redundancy, remove noise (common after resizing), and use 8-bit or smaller PNGs for web use. Here's a summary of PNG optimization tips:

• Maximize horizontal redundancy (and vertical redundancy, for full-color PNGs).

• Remove any noise, and remove stray pixels in flat areas.

• Use 8-bit PNGs (or lower), not 24-bit PNGs.

• Reduce bit-depth and maximize cropping.

• Avoid interlaced PNGsuse only for larger PNGs with similar file sizes.

• Use the maximum compression available (9).

• Use grayscale where possible.

• Use Pngcrush for maximum compression.