PNG is quite popular and versatile format for web, but not so as we all want. Why? Because software cannot render, save and open it correctly. Only IE6 is worth to remember, I hope soon that wretched browser will stay in far-far past. Sometimes happens that PNG’s file size is quite heavy.

OK, lets begin our story. When you create a PNG files in Photoshop they seems to be quite large. “Why” you ask? I answer, because Adobe Photoshop (even CS3) don’t know how to save PNG format correctly (strange, but Adobe Fireworks does). Ok, lets see why

Look at these vivid magenta zones? What are they?

These magenta zones are pixels with real transparent color values, but other transparent stuff have different data (if you fluent in Russian you can read this page and learn how to remove this extra data manually in Photoshop). So we need to remove this extra data to make file size lesser.

As technology guy I’m too lazy to do these removing operations by hand. So I have written script to make this work faster and more happy. Moreover the script uses all power of zlib to compress PNG images, what Photoshop doesn’t fully use.

Script is written in PHP and I recommend to run it from command line, not from browser, because it can hang up your Firefox.

Download or check source.

To run script, use this command in your console, be sure that your PHP is complied correctly with GD library:
$php optpng.php [dir]
For more information see comments inside script.

Some examples

Before	After
59 606 bytes	50 915 bytes
Before	After
53 696 bytes	50 869 bytes

In this examples we get a slight gain, but when you use more larger images your winning in size up to 50% without any lose of quality. Anyway as tests show you will win average 25% in size. See example of script output information (265 Kb less, not bad).

When I learn Ruby better I will do clone in Ruby.

So have fun and don’t believe what you see!

PS. You can use much better image optimizer Smush it!.