Sometimes I think we threw the baby out with the bathwater. An animation that weighs in at less than 100KB in Flash, currently weighs in at around 8MB in Processing. Admittedly it’s made using pngs rather than vectors but that does seem a little huge. I used 122 pngs to make the animation above, in Processing. It turns out that each frame in the Podman animation weighs in at around 20KB, work it out for yourself, that’s pretty huge. So I had a look at how I could compress the pngs to their smallest possible size. I turned to the two big hitters Photoshop and Fireworks but they have next to no PNG24 compression control. If my Podman is to have a nice fluffy drop shadow and a soft edge, I needed the semi-transparency available in the PNG24 format, with some extra control over the compression. PNG24 is billed as a lossless format, meaning it doesn’t throw away any information, it just tries to compress the file, with no data loss. I remembered dealing with IE6 and it’s buggy handling of transparent pngs. I stumbled upon a tool called ImageAlpha written by a clever bloke called Kornel Lesi?ski. This brilliant free application adds a whole suite of extra compression options to those that ship with Photoshop and Fireworks. You can specify the number of colours, choose from range of compression algorithms, toggle dither and specifically ensure that the exported image is IE6 compatible. Pretty amazing if you ask me. Why these features aren’t in either of Adobe’s products is beyond me.
Although I was well on my way to success. My woes weren’t over yet. I had 122 pngs to re-export and ImageAlpha, doesn’t seem to support batch processing of multiple files. After consulting the ImageAlpha website I stumbled across this tantalising statement:
ImageAlpha is mostly based on pngquant. You’ll find compiled pngquant executable in ImageAlpha.app/Contents/Resources directory.”
This was music to my ears. After visiting the GitHub link, I realised that png heaven was close.
Follow these steps.
1) Do a test export of a .png using the ImageAlpha application. Make a note of the number of colours etc.
2) Select the ImageAlpha application in the Applications directory, right click / ctrl+click the application icon and select “Show Package Contents”.
3) In the “Resources” directory you will find a magical executable file called “pngquant” the path to this files will be something like: “/Applications/ImageAlpha.app/Contents/Resources/pngquant” right click / ctrl+click and select “Get Info” to be sure. You will find the path under the “General” drop down arrow. Copy down the path, including the name of the application itself “pngquant”.
4) Open Terminal.
5) Paste in the path to “pngquant” adding “-h” immediately afterwards, in my case it looked like this:
This will print out some information onto your Terminal window. It’s actually a set of instructions on how to use pngquant, and to perform the batch processing of our 122 pngs.
This is the most useful part of what gets printed out on the Terminal window.
usage: pngquant [options] [ncolors] [pngfile [pngfile ...]]
--force overwrite existing output files (synonym: -f)
--nofs disable Floyd-Steinberg dithering
--ext new.png set custom suffix/extension for output filename
--speed N speed/quality trade-off. 1=slow, 3=default, 10=fast & rough
--quality min-max don't save below min, use less colors below max (0-100)
--verbose print status messages (synonym: -v)
--iebug increase opacity to work around Internet Explorer 6 bug
--transbug transparent color will be placed at the end of the palette
I know it looks complex, displayed there on a spooky Terminal window, but it’s really simple honest. Each one of these options is an instruction, that gets sent to “pngquant”
6) Finally I constructed the following line to complete my task:
/Applications/ImageAlpha.app/Contents/Resources/pngquant --nofs --iebug 64 Documents/Processing/Podland/Podland/test/*.png
it breaks down as follows:
[Path to "pngquant"] [--nofs = no dithering] [--iebug = fix the ie bug] [number of colours] [path to my directory ending in the wildcard "/*.png" to process all images ending with the ".png" extension at this location]
7) Hit return.
8) Check out your directory and enjoy your freshly exported images.
NOTE: My animation is still 1MB though. Next stop: SVG.