This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We’ll start with some essentials about the PNG format and will then move to advanced optimization techniques.
Having talked a lot with fellow professionals both at seminars and in the studio, I arrived at the conclusion that for many people the only benefit of PNG is that you can get true semi-transparence. Try looking online for information on this format, and you will see that Web developers are divided into two camps. The PNG proponents give praise to the format but base their arguments on purely technical data (for example, talking about the deflate compression algorithm’s superiority over LZW), mostly incomprehensible to the down-to-earth Web programmers and Web designers. The opponents, having not tried to delve into the PNG specifications, make more or less stupid comments on the utter uselessness of the format.
Let’s try to find out PNG’s benefits, so you’ll be able to use this format efficiently when preparing images for online publishing.
First, a little bit about the terminology. I guess you are using Adobe Photoshop, so you must be more or less familiar with PNG-8 and PNG-24, which are not two different formats but only subtypes of the same format. PNG lets you store images in one of three ways, namely Grayscale (also spelled Greyscale; only one channel, white, is used for describing the image), Indexed Color (a palette of colors is used, just like in GIF) and True Color (three channels, red, green, and blue, are used, giving the abbreviation, RGB).
PNG’s major benefit is its new compression algorithms. Do you remember that GIF is only good in compressing horizontal one-color areas? Now you can forget about this drawback:
GIF, 2568 bytes
PNG-24, 372 bytes
PNG’s another virtue is scanline filtering (also known as delta filters), thanks to which the PNG compressor is fed data that is much easier to pack.
Here’s an example of how those filters do their job. Let’s take a 5 pixels by 5 pixels bitmap image (each number corresponds to a specific color) with horizontal color gradient and see how it can be saved into a file.
Make a note: The RGB format specifies that a color is stored as one number, not as three (one per channel). For example, the color coded as R: 253, G: 93, B: 69 is stored as the number 16604485 (decimal) or #fd5d45 (hexadecimal).
As you can see, there are five one-color columns, so the GIF compressor would get some poorly compressible horizontal lines. Now check out how PNG handles the same input data:
As you can see, there’s the digit 2 before each line — that’s the filter. In this case, it’s the Up filter, which instructs the decoder as follows: “For current pixel, take the immediately above pixel’s value and add it to the current pixel’s value.” As the current and the upper pixels have the same color, the result is 0. And these data might be packed more efficiently, provided that you have a big enough image.
Why might be packed? That’s because our idealized case makes for a more efficient packing scheme:
The filter 1, called Sub, was used, which instructs the decoder as follows: “For current pixel, take the immediately left pixel’s value and add it to the current pixel’s value.” This time, it’s 1.
Following the filtering, all the lines (together with the respective filter values) are combined into one sequence, which is then compressed using the deflate algorithms (not covered in this article).
Make a note: There are five filter types: None (no filtering), Sub (from the current pixel’s value, subtract the left pixel’s value), Up (subtract the upper pixel’s value), Average (subtract the average of the left and the upper pixel’s values), and Paeth (substitute the value of the above, left or upper left pixel’s value; named after Alan Paeth).
Here’s what the filters do:
PNG-24, filter: None, 56,084 bytes
PNG-24, filter: Up, 23,585 bytes
You might have noticed that the filters are applied not to the whole image but to separate lines, meaning that each line may have its own filter. Therefore, the total number of ways the image can be filtered equals 5picture height. Actually, a good encoder’s job is to select the optimal values of filters in order to minimize the file size. Alas, Photoshop’s approach to image compression isn’t perfect, so various image optimization applications like OptiPNG and PNGCrush come to help, which try out multiple filtering options and data compression strategies and thus can reduce the file size of some complex images. However, even such specialized apps do not guarantee the minimum file size for each case but only do their best to find the optimal method of data encoding.
Adobe Photoshop’s another weak point is that it cannot save images in grayscale, meaning that it cannot handle color depth reduction properly. Luckily, the above-mentioned image optimization software can reduce the color depth as well, while keeping the picture quality fairly close to that of the original.
PNG-24 (Adobe Photoshop → True Color), 8,167 bytes
PNG-24 (Adobe Photoshop + OptiPNG → True Color), 6,132 bytes
Grayscale’s advantages over True Color are easy to see. For example, the white color is saved as the number 255 (decimal) in Grayscale and as 16777215 (decimal) in True Color.
Having learned about the specifics of PNG data compression, you can use this knowledge when preparing pictures for the Web — read about that in the next articles.
We will start from the easiest way, I mean, from image posterization. Talking technically, posterization is changing brightness levels number in each image’s color channel. In other words, it’s simply changing number of colors.
Let’s open test picture (PNG, 12 kB) in the Photoshop and call Image → Adjustments → Posterize. Move the slider, to see how the image is changing.
It’s easy to see that less is the level less colors the image has and bigger are one-color areas. And less is the size of image due to the fact that one-color areas are better filtered and packed. This method is especially effective on photo images, where posterized areas are not so visible.
The next method is a little bit more complicated, and is used for images with semi-transparent areas. It’s about saving all non-transparent pixels in one file PNG-8, whereas all semi-transparent ones – on other. You can see how it works in Volodya Tokmakov’s article, and I’m just going to show the fast way of separation semi-transparent pixels from non-transparent ones.
Let’s take this image as an example (PNG, 62 KB):
Open it in the Photoshop. You should remember the whole image is to be in one layer, so if you have several layers (shadows, glares, reflection etc) you need to unit them in the one layer.
First we need to select the object in the layer, by making Ctrl-click (or ⌘-click on the Mac) on image in layers palette (Layers):
Go to channels palette (Channels) and create new channel from selection, pressing on the special icon:
Deselect it (Ctrl-D or ⌘-D), and select recently created channel, then call the command: Threshold (Image → Adjustments → Threshold). Drug slider in the right end:
Now we have a mask for selecting non-transparent pixels. Now we just need to load selection (Ctrl-click/⌘-click on Alpha 1-channel image), go to layers palette, (Layers), select layer with image and launch command Layer → New → Layer via Cut. Now you have two layers, where non-transparent pixels are in the one level, and semi-transparent – in another.
Now just save these layers in separate files: non transparent ones are to be saved in PNG-8, and semi-transparent — in PNG-24 (for this image additional posterization is):
PNG-8 (128 colors + dithering 17 KB)
PNG-24 (posterization 35, 6 KB)
That’s what we have as a result:
Make a note: Very attentive reader would notice that basically all actions are recorded in Actions field, so following image separation is realized just by one mouse-click.
The disadvantage of such a method is based in two images as a result, which are not easy-to-use (for example in products catalog). In my next article we will study quite complicated optimization method which is not so universal but its advantage is one file as a result.
A screencast demonstrating how most of these techniques work in real life:
Subscribe to our email newsletter for useful tips and freebies.