Page 1 of 1

Posterization – Optimizing PNGs some more …

Posterization – Optimizing PNGs some more …
   4

How can we optimize PNG images even MORE …?

You might have looked at some of the PNG optimization tools out there like PNGOUT, although great tools, they can’t quite keep up with JPEG compression when it comes to photographs and other more complex graphics – but you’d like fast loading webpages yet still want to use transparency which is something JPEG and GIF do not [properly] support.

Another trick that will nibble off quite a few bytes is “Posterization” – a function found in Adobe Photoshop and most other graphics programs.

In this article I’ll show you how to use it and how beneficial it can be.




What is Posterization?

Posterization is basically the effect (often used for other purposes) where the color depth of an image is changed in such a way that gradients change color more abrupt.

What does this mean? Well, imagine that you have a gradient from white to say blue as shown in the (extreme) example below:

Posterization example

Posterization example

Line 1 is the original gradient from white to blue.

Line 2 is that same line, now we applied a certain level of Posterization.

Line 3 is the same line as line 1 again, with even more Posterization applied.

We are going to use this technique to “compress” an image by reducing it’s color depth without serious visual impact (obviously the example above is more distortion than we’d like to see of course).

Adobe Photoshop, GiMP, Paint.net, and others offer this functionality. It’s a straight forward process for any of these guys. In this article we will illustrate posterization using Adobe Photoshop.

Reducing Filesize

 Tip:For normal photographs I’d still use JPG as the file format used in my webpages.
But in some cases I really like to have transparency available and JPG / GIF unfortunately do not support that (properly) so I find myself diverting to the PNG file format which can produce some big files, and that is the main reason for this article …Also note that posterization is a technique that will work for other image formats as well!

OK, let’s get started. In this example I’m using a picture of my personal hero: Puck … here temporary dressed up as a Christmas Elf (the hat stayed on about 2 seconds – oh, and no animals were hurt during this event).

Puck - The original picture

Puck – The original picture

I reduced the image size for demonstration purposes.

With some JPG tweaking the file became only 150 Kb. Saved as a PNG however this file is 608 Kb … a lot bigger – over 4 times bigger! Ouch!

Utilizing a tool like tool like PNGOUT helps, but with a photograph like this one the results are not exactly stunning (with other types of images you might gain a lot more – so this tool is far from useless!); this file reduced to 607 Kb – we gained one miserable Kb.

PNG-8? 

Images that do not use as many colors can be saved in the so called PNG-8 format, which reduces the size significantly (PNG default uses 24 bit depth called PNG-24). Two downsides though, are that a photograph will typically not look all that great and … transparency will look like crap as well.

 

Posterization in Photoshop

Let’s open this image in Photoshop.

When you look at the bottom of the “Layers” window, you will see the icon for the icon for “New fill or adjustment layer” (see image below). When you click that icon a popup menu will appear with the option “Posterize…“, click that option.

Photoshop posterization tool

Photoshop posterization tool

The inital value (in my case it was 4) was simply way to much …

Posterized way to much ... poor Puck

Posterized way to much … poor Puck

Go to the posterize window and start sliding the “Levels” slider to the right until you think the image still looks OK.

Photoshop - Posterize slider

Photoshop – Posterize slider

Once you found your sweet spot, save the file again as a PNG.

In my example, the sweet spot was (you guessed it) 39 which resulted in a 352 Kb PNG file! We just shaved of 256 Kb a 42% file size reduction … and still looking good.

Puck posterized, and pulled through PNGOUT ... 52% filesize reduction!

Puck posterized, and pulled through PNGOUT … 52% filesize reduction!

Mangling the file through PNGOUT (utilizing ImageOptim) made it a 291 Kb file, taking off an additional 61 Kb bringing it to a total file size reduction of 52%!

So the original 608 Kb file ended up to be a 291 Kb file … with a little help of posterization.

Still twice the size of a JPEG file, but … now supporting transparency!

Donation options


Donations are very much appreciated, but not required. Donations will be used for web-hosting expenses, project hardware or a motivational boost (a drink or snack). Thank you very much for those have donated already! It's truly AwEsOmE to see that folks like our articles and small applications.

Comments


There are 4 comments. You can read them below.
You can post your own comments by using the form below, or reply to existing comments by using the "Reply" button.

  • Nov 17, 2015 - 4:13 AM - dan Comment Link

    Would it be possible to incorporate optimization (pngout etc) to the resizing process? There are so many resizing tools, and so many optimization tools, but so few that do both quickly and easily (ie. services or droplets) – while also using the best optimizers that ie. ImageOptim has integrated. 

    Having a service that would both resize a png AND optimize it after (ie. a screenshot) would be amazing!

    Reply

    dan

    • Nov 17, 2015 - 5:17 AM - hans - Author: Comment Link

      Hi Dan,

      couldn’t agree more! 

      Unfortunately PNGOut (etc) are “owned” by other, not sure how happy they would be if I’d redistribute it in a package that handles resizing and optimizing.

      I’ll put this on my To-Do list. I will be traveling soon, so that will give me time to toy with that some more.

      Reply

      hans

      • Nov 17, 2015 - 5:20 AM - dan Comment Link

        Ahh ok. Makes sense! I’ll wait patiently then :) Thank you though, for sharing your tweaks. Inspiring and helpful. Safe travels!

        Reply

        dan

      • Nov 17, 2015 - 5:54 AM - hans - Author: Comment Link

        Thanks Dan! 

        Reply

        hans



Your Comment …

Friendly request to not post large files here (like source codes, log files or config files). Please use the Forum for that purpose.

Please share:
*
*
Notify me about new comments (email).
       You can also use your RSS reader to track comments.


Tweaking4All uses the free Gravatar service for Avatar display.
Tweaking4All will never share your email address with others.