| [ Team LiB ] |
PNG OptimizationPNG, 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.
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 PNGsPNGs 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.
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-DepthLike 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 PNGsPNGs 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.
Use Filters for Better CompressionPNGs 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 GIFAn 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 image�a toolbar.
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.
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 action�smoothing a GIF in Windows.PNG Optimization SummaryBecause 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:
|
| [ Team LiB ] |
No comments:
Post a Comment