Most Effective Method to Reduce and Optimize PNG Images

Written by Kevin Liew on 10 Mar 2010
280,922 Views • Techniques

Introduction

Just recently, I was assigned to in charge of an iPhone game website. Due to the design, it needs heaps of png files so that I can use CSS to layer them together. It's quite a sophisticated website when it also come with a jQuery scrolling effect. I hope I can show it here, but it haven't released yet. :)

I like png, it supports by all the browsers (except IE6, but you have the hack anyway). Usually, I would use JPEG or GIF, but this time, most of the images has drop shadow and the background of the website is tiled with clouds. However, we're facing a problem, the file size of the PNG files are pretty massive. Though most of us has fast Internet, but it's good to optimized all the images to be as small as possible without losing quality.

One of my friend showed us this technique to reduce PNG file size and I was pretty amazed. All the time, the PNG optimizer is here with me. That's it, we're using Adobe Photoshop to do it. Of course, not the Save as web, just one more step, we can reduce PNG file size but still maintain its image quality.

So, Obviously, you need photoshop, not sure if Gimp have it.

Step 1: A PNG File

I choose an image randomly and this is it:

Optimize PNG - Choose a PNG file

Step 2: Posterize it

Go to the menu bar, Image -> Adjustment -> Posterize

Optimize PNG - Posterize option

Step 3: Posterize it

After you've clicked on Posterize, you should able to see a dialog . It has a slider for posterize level adjustment. Slowly adjust it to your desired quality. If you observed it carefully, you will able to see some colors are being discarded, and that's the way to reduce the file size.

Optimize PNG - Adjust posterize level

Step 4: Save as web

Okay, the final step - save your file. Go to File -> Save as web... Then, you've just optimized your PNG file! I believe your PNG file size is reduced.

Optimize PNG - Save as web

A small test

The following is some tests I have done to see how much file size it has reduced.

  • Optimize PNG - Save as web

    Original file - 147 KB

  • Optimize PNG - Save as web

    Web Optimized (Save as web without posterization) - 70 KB

  • Optimize PNG - Save as web

    Posterized and save as web - 53 KB

  • Optimize PNG - Save as web

    Posterized with slight losing of Image quality and save as web - 37 KB

Conclusion

There are a lot of softwares out there, but most of them couldn't do the job well. I still reckon we need human eyes to make sure we optimize the images properly without compromising too much of the image quality. This is a simple technique and I guess it's the most efficient and less time consuming. However, we do need Adobe photoshop or si image editor that has posterize or similar capabilities.

If you think, it's not worth it to run a big program just to do a small task, well, it works for me because I have photoshop running all the times. :) I hope it helps. Cheers.

If you have a better way to do it, don't forget to share it in the comment below :)

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

71 comments
rob 14 years ago
is there an editor that can create an alpha layer, then save it as an iphone optimised png?
Reply
Clipping Path India 14 years ago
I faced a problem at the time of using my picture and i solved it by reduce resolution but i lost my image quality. By this tutorial i knew how to reduce the image size without losing image quality. I think png is final solution.
Reply
Fabio 14 years ago
Really useful!
Was trying to study the PNG compression algorythm then I read your post!
Thank you
Reply
Clipping path service provider 13 years ago
Awesome tutorial. Well explained and easy to learn . Thanks for sharing this wonderful post. :)
Reply
Sharan 13 years ago
Really Really Very help full
Reply
Shandr 13 years ago
<3
Reply
Albert 13 years ago
Awesome technique which allowed me to reduce file size by up to 90% on most PNGs I had. Thank you!
Reply
Stacey 13 years ago
This is a fantastic trick!!! Thanks for sharing! :)
Reply
Robbie 13 years ago
tried this out on a large image. worked a treat thank you very much :)
original file size 1.28M
save for web without posterization 517.2K
save for web WITH posterization 269K
thanks again
Reply
Gajendiran Perumal 13 years ago
Thanks! Great information.
Reply
Ranjana 13 years ago
hello dear, its really amazing i always surfer from this problem and i got the solution because of u thanks a lot :):)
Reply
Sara Lim 13 years ago
your solution is so effective....thanks :)
Reply
rayme 13 years ago
The original needs to be flattened first to run the posterize.
One option I think is to initially save-for-web the file to png and again open it to posterize it and do aother save-for-web to get a small file-size. I havn't tried it, but feel it make a lesser one
Reply
Foundry 13 years ago
cool yeah... me too did the same... ny way the tut is a lifesaver...
Reply
Phillip 12 years ago
Rayme has it right with regard to using "posterize" because if you first "save for web" PNG-24 Transparent, you xan then take the larger PNG file and have something to compare to when you see how much posterization to do. If you start with Posterize, you have lost color pixels for good and can't get them back.
Reply