Techniques

Most Effective Method to Reduce and Optimize PNG Images

Written by Kevin Liew on 10 Mar 2010
188,544 Views • Shares
71 comments

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
Bob 3 years ago
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. 2 years ago
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