Most Effective Method to Reduce and Optimize PNG Images

Most Effective Method to Reduce and Optimize PNG Images


Most Effective Method to Reduce and Optimize PNG Images

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 :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

71 comments

qwetie
Wed, 21st August 2013
With Lossy PNG (http://pngmini.com/lossypng.html) I got the file down to 25KB

http://pngmini.com/lossypng.html)
Reply
Elliane
Thu, 28th November 2013
Lossless Photo Squeezer is also a good tool for image optimize for mac.
It support jpg,png,gif.
You can go to https://itunes.apple.com/app/id704083918 to get more information Reply
Joe Simmonds
Thu, 5th December 2013
Kevin, you're a legend! Thanks for taking the time to write this us. I've been struggling to keep the overall load times down on some complex sliders and this is exactly what it needed :-) Reply
Nancy
Thu, 19th December 2013
One more useful and nice image optimize tool for Mac
IMAGEmini is powerful and easy to use, I like the custom resize function
 More information,you can visit
<code>https://itunes.apple.com/app/id771501095</code>
Reply
Daniel
Sat, 28th December 2013
It can be done in gimp
See the link below

http://docs.gimp.org/2.6/en/gimp-tool-posterize.html Reply
Bob
Tue, 4th March 2014
I found that turning down the "dither" in Save for Web from 100% to 0% halved the file size for my PNG. Pretty good. Reply
Marianne F.
Thu, 6th November 2014
Standard PNG files are already created in a lossless compression format but there is still a very effective way to compress them even more by adjusting the color dept or resolution, which can save you 70%+ of the file size if done right.

There are several free tools for this which I use for my websites. The best software I found is FileOptimizer( http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer ).

A good free online tool I found to be quite effective is this one: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement