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:

Step 2: Posterize it

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

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.

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.

A small test

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

• 

  Original file - 147 KB

• 

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

• 

  Posterized and save as web - 53 KB

• 

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