A Complete Guide to Web Design

294 Chapter 16 – PNG Format

When to Use PNGs

Web Design in a Nutshell, eMatter Edition

Filters

Before PNG compresses an image, it first runs the image data, row by row,

through one of five filters. What follows are brief descriptions of each filter that

may aid in making a filter selection in an image-editing tool such as Adobe Photo-

shop. Although these filters are available, the only two methods that should be

used are None (for indexed-color images) and Adaptive (for everything else).

Full technical descriptions of each filtering algorithm appear in the PNG Specifica-

tion (http://www.w3.org/TR/PNG-Filters.html).

None

As it implies, this option applies no filter before compression. The PNG Speci-

fication recommends that the filter be set to “None” for flat, indexed color

images.

Sub

This filtering algorithm analyzes relationships of image information in rows of

pixels. It may be appropriate for images with horizontal color gradients (from

Lynda Weinman’s Designing Web Graphics, Second Edition, New Riders

Publishing).

Up

This algorithm looks for relationships in columns of pixels. It may be appro-

priate for images with vertical color gradients (also from Designing Web

Graphics).

Average

This algorithm uses an average of the horizontal and vertical relationships for

each pixel.

Paeth

This is a complex filter developed by Alan W. Paeth that uses the best predic-

tion based on samples from three directional relationships (left, above, and

upper right).

Adaptive

This filtering method applies each of the above filters to every individual row

of pixels, then chooses the algorithm that works best for that row, resulting in

the best compression for that particular image overall. So, if you can’t decide

which filter to use, you can let “Adaptive” try them all for you. The PNG Spec-

ification recommends using the “Adaptive” method for continuous tone

images.

When to Use PNGs

Unfortunately, the answer to this question is “when a higher percentage of

browsers in use support them.” As of this writing, there is too great a risk that

most of your audience won’t see your PNG at all, or will see it without the

features that make it worth using.

But in a perfect world, where PNG is fully implemented on all browsers, PNG is

capable of supporting both indexed and truecolor image types, so there’s no

bitmapped graphic it can’t handle.