The PNG format has an ever-growing place in Web design, especially now that the number of IE6 users is starting to drop. All modern browser support the format and its alpha transparency, which makes it very handy for use in layouts. Drop shadows and various other semi-transparent effects can be applied using a PNG without having to worry about the background colour beneath it. No more adding the background with JPEGs or colour dithering with GIFs.

However, there are criticisms levelled at the format – most notably its size. Whereas PNG will probably never compete with the JPEG for photo-quality images, there are many optimization techniques that people fail to use or just take for granted because of the JPEG format. What people dont realise is that there is a fundamental difference between the two formats – JPEG is lossy and PNG is lossless.

The JPEG format analyses an image and changes the actual pixels in order to achieve its compression. This is why JPEG artefacts (blockiness) appears on the image. Whatsmore this occurs on each save, so repeatedly saving out as JPEG results in further and further loss of quality. PNGs on the other hand can be edited and saved over and over again without any reduction in quality because PNG achieves its compression using techniques similar to those found in zip files. The actual pixel values never change in a PNG image.

With a little understanding of how this type of compression works, we can develop some optimization techniques for PNG images. In its simplest form, compression finds sequences of a particular value and converts it to one value and a multiple (i.e. how many times that value is there). The compression works best when there are a restricted number of values in a particular file.

How does this relate to our images? Well, when we say values, read colours. The less colours in a PNG image the better the compression will act. To demonstrate this, we can use the Posterize effect in Photoshop, which is designed to reduce the number of colours in an image (the name comes from print design, when posters would be reduced to as few colours as possible to save on printing costs).

Heres our original image, a 24-bit PNG with an 8-bit alpha transparency. Using Photoshops Save For Web function, the images comes out at 164KB.

Opening this image and repeated the Save For Web process will have no effect on the image size or quality. Photoshop will simply uncompress the image when you open it and then apply exactly the same compression when you save it. Instead, open it up and select Image – Adjustments – Posterize. Set the number of levels to 60 and click OK. We get the following image:

Youd be very hard-pressed to find a difference between this and our original but this has brought the size down to 124KB (a 24% reduction). The reason the difference isnt noticeable is that colours that were next to each other and very similar have been combined as one colour – the eye tends not to notice this as its very biased towards picking out contrast. Taking this further, we can drop it the posterization to 40 levels, and the result looks like this:

At just 40 levels, we start to see some of the colour-grouping on the yellow die, but the rest of the image is still very comparable in quality to our original. Its now down to 112KB (almost another 10% saving). Taking it down to 20-Levels brings it down even further to 92KB but the quality really starts to go, so maybe in this case somewhere between 40 and 60 levels would be the best compromise.

The important thing is that the control of this is completely down to you. It can be applied whilst creating the image or at later optimization stage after saving it out for the first time. Through the use of layers or just the basic selection tool, you can apply posterization to different parts of the image. In this case, its possible to get the size of the image down even more by applying one level of posterization to the out-of-focus elements and a more drastic posterization to red die in the foreground.