3 Modern Tips For PNG Optimization

PNG (Porable Network Graphics) is considered to be one of the most popular formats, due in large part to its full-featured transparency and lossless data compression. Here are 3 ways to get the most out this format.

While preparing the graphics for your application, many designers and coders might think that there are only desktop app ways to compress your pictures. I’ll show here a few ways to optimize your PNG image with Photoshop and one of my favorite online magic. I will skip essentials of PNG and any other boring parts that might be found on Wikipedia or found in the huge article by Sergey Chikuyonok on Smashing Magazine several years ago. So..

Posterization

Number one is Posterization—That’s cool, well-known and very simple technique. Needless to say, that it’s my favorite. It does not require special Photoshop knowledge except few easy moves. Go to Layers pallete after clicking the adjusting layer icon and choose the ‘Posterize’ line. Set it on 40-60 in popup window, this will be enough. It converts all similar colors into one, the whole amount of them becomes fewer and image’s weight lower and more importantly, you can edit your files further in the future.

Dirty Transparency Photoshop Action

Second technique is Photoshop action by Gracepoint Five, Dirty transparency, it was also mentioned in previous articles but as for me, it is not as effective when compared to posterization. But it works decently well and is a delicate technique where several moves take place to remove hidden data of the alpha channel.

TinyPNG.org

The last one is this fantastic online optimization tool! It uses such technique such as “quantisation”, where similar colors in your image combine with each other and as a result, you’ve got your image as PNG 8-bit colors indexed but with support of transparency (similar to posterization). It is perfect tool for those who do not want to play with Photoshop filters and just want to use a clever application. Its advantage is that unlike ‘PNGOut’ or ‘PNGCrush’ (and some other desktop tools) which do not cope with transparency, your sprites will stay editable.

If you know other useful ways to optmize ‘Portable Network Graphics’ share them with us in comments box below. What are your favorite techniques?