Posterise PNGs To Improve Compression

As long as you don't mind breaking compatibility with older browsers and have no need for animation, the Portable Network Graphic (PNG) has replaced the Graphics Interchange Format (GIF) as the preferred transparency-supporting lossless image format of the internet. Over the next few weeks, we're going to explore the different ways you can optimise the size of PNGs while compromising little on quality.

The first trick we're going to learn is using posterisation to reduce the colour complexity of an image. This process works best on images with few colours and as long as you don't go overboard, the visual differences are virtually unnoticeable. if you look at the left-hand side of the photo above, you can see an extreme case of posterisation. Similar colours become blobs of the same colour and a lot of detail is lost.

So let's not go that far. Fire up either Photoshop, GIMP or your photo editor of choice. Load up your image and in PS, go to Image -> Adjustments -> Posterize..., while in GIMP you need to navigate to Tools -> Color Tools -> Posterize or Colors -> Posterize. Both programs will show a dialog box where you can adjust the number of levels of posterisation.

A good starting point is between 30-45, though you should go higher if you notice a huge drop in colour depth and lower if you think you can get away with it. Once you're happy with the appearance, save the image as a PNG. The compression ratios will vary depending on the size and complexity of the image, but a 640 x 360 shot of the flower here went from 363.1KB to 213.3KB, using Photoshop CS5 and a Posterize setting of 30. That's a 41.3 per cent drop in file size; for web development, the bandwidth benefits massively outweigh the tiny drop in quality.

On the left is the original image, the posterised one on the right (click to expand).

The reason posterisation helps with PNG compression is because the PNG format uses the Deflate algorithm to reduce the size of the image data. Like many general-purpose compression algorithms, Deflate transforms consecutive sequences of repeating data into shorter codes. So, if you replace a bunch of very similar, but not identical pixels with identical ones, that image data is naturally going to compress better.

While the compression gains from posterisation can be significant, it is not a magic bullet. You are discarding colour information, so you'll want to keep an unaltered version of the image around just in case. Posterisation -- at least in Photoshop -- has a tendency to make images darker, so keep this in mind when performing colour correction.

Next, we'll take a look at a number of programs that can optimise PNGs further and put together a script to automate the process of funnelling images through these apps.


    WTF? Am I missing something here or is this just a completely pointless, relatively long-winded and ultimately clumsy way of doing the same thing Save For Web does, without the benefit of things like transparency support and 4-up preview?

      It's good to have the background. Otherwise, you might try using dither for colour reduction - and end up with adjacent pixels being different colours. Less colour depth, but PNG would not be able to have the long runs of single colour required for improved compression.
      In other words... if Save For Web is optimised for GIF instead of PNG, you'll get crappy results. This way would then be better.

      Yes you are missing something!

      Save for Web does not do any sort of posterisation, at least, not in CS5. The example PNGs, both posterised and unposterised, were both saved with Save to Web, and the posterised one came out much smaller.

Join the discussion!

Trending Stories Right Now