About PNG. Part 1 14 November 2007

Having spoken with my colleagues at various seminars and in the studio I came to the conclusion that for many the only advantage of PNG format is that it has fair transparency. If you look for information about this format on the Internet, you will see that web developers apparently fall into two groups. There are those who praise this format using technical terms that don’t make sense to ordinary coders and designers (for example, arguing that deflate compression algorithms are more effective that LZW), and the rest who leave more or less stupid comments on PNG being useless as they fail to do the least and study the specification.

Lets see for ourselves what opportunities this format offers and learn to take advantage of them when making images for web.

We’ll start with terms. I believe that most readers are familiar with Photoshop and have come across PNG-8 and PNG-24. These are not two different formats. Both of them are variations of PNG. The format allows storing images of three types: greyscale (the image is described through a single channel—white), indexed-color (uses color palette like the GIF format) and truecolor (uses three channels—RGB).

The main advantage of PNG is, of course, new compression algorithms. You do remember that GIF enables effective compression of only horizontal single-color areas, right? Well, now you can forget this limitation:

GIF, 2568 bytes

PNG-24, 372 bytes

Another useful feature is scanline filtering, or delta filters, that provide PNG compressor with much better data.

Here is an example of how they work. Lets take an image 5×5 pixels with horizontal gradient and draw a chart of how it can be saved into a file (each number stands for a unique color).

As you can see, GIF coder would subject to compression horizontal lines which is the least effective way to pack them (because it’s vertical lines that are of the same color). And here is what a PNG compressor would do:

You can see number 2 before each line. It shows what filter is applied to the line. In this case it’s Up filter which tells decoder: “For the current pixel take the value of the above pixel and add it to the current value.” We have 0 because both pixels are of the same color. And such data would be compressed better if the image is relatively large.

Why did I use may clause? That is because an ideal case pattern for this sample would be the following:

This one uses Sub filter sending decoder the message: “Take the value of the left pixel and add it to the current value.” In this case, it’s 1.

After filtering all lines (together with filter numbers constitute a sequence which is then compressed using the Deflate algorithms (these are a subject for another discussion).

Lets check if it works:

PNG-24, None filter 56084 bytes

PNG-24, Up filter 23585 bytes

The attentive reader might have noticed that filters do not apply to the whole file, but work on separate lines. Therefore, each line can have its own filter. This way the image can be filtered in 5^{image height} ways. In fact, a good coder’s task is to figure out what filters would make the file size the least. Unfortunately, sometimes Photoshop doesn’t do a good enough job. In such cases you have to use utilities such as OptiPNG and PNGCrush which analyze variants of filtering and compression in large quantities and help to make complex images less heavy. These programs, however, do not guarantee smaller size for any file; all they do is search for optimal coding.

Photoshop also blamed for its inability to save images in greyscale mode, i.e. it doesn’t know how to reduce color depth. You can deal with this using the already mentioned utilities. They allow you to bring down color depth where possible keeping the image quality.

PNG-24 (Photoshop → truecolor), 8167 bytes

PNG-24 (Photoshop + OptiPNG → greyscale), 6132 bytes

It’s obvious that greyscale is more effective than truecolor—for instance, white color is represented by 255 (in decimal notation) in greyscale and by 16777215 in case of truecolor.

So, now that we know how information is stored in PNG files, we can go on to use this knowledge when saving images for web. Read about this in the next article.