Reduce PNG Graphic Size Using PNGCRUSH
Now that I'm knee-deep in MacBook I love working with command line applications. There's a certain beauty in the simplicity of using the console instead of a nice GUI. One task I use the console for often is reducing the size of PNG files using the powerhouse that is PNGCRUSH.
The Shell Script
# directive
pngcrush -reduce -brute source.png destination.png
#result
Best pngcrush method = 113 (fm 0 zl 9 zs 0) for destination.png
(33.38% IDAT reduction)
(33.43% filesize reduction)
CPU time used = 835.707 seconds (decoding 151.450,
encoding 679.145, other 5.112 seconds)
The above directive is a basic usage of PNGCRUSH. PNGCRUSH offers a wealth of options that allow you to optimize your PNGs. If you use many PNGs on your website, optimizing them using PNGCRUSH is a must. Using the above directive, PNGCRUSH took a 11.7MB down to 7.8MB. NO QUALITY LOSS. Sure it took over 10 minutes, but think of the bandwidth your site will save.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
no way dude, I suggest u 2 give a try to image magick
that looks a little bit powerful & faster and gives u the same or better results
http://www.imagemagick.org/script/index.php
when I need to shrink down images in some app I always use this
it’s capable to manage even other formats such as jpg, gif etc..
You should check out http://developer.yahoo.com/yslow/smushit/ :-)
I’ve always loved PNG’s – and I’ve been impressed with the file sizes that Fireworks and Photoshop can output. But thx to this heads up David it looks like I’ll be squeezing a little bit more out of my PNG’s from now on.
Cheers
And apparently the above is spammy and I have to try again… what algorithm are you using? I have no links… It’s a pretty straight up comment…
I’ve used that proggy in the past and it gave me same results as photoshop pics.
Whenever I’ll need to try something more than imagemagick, I’ll give it a try…
And if anyone doesn’t want to install pngcrush or mess with terminal, they can use this dashboard app which does the same thing: http://www.plasticvicar.com/PNGpong/
You just drop the image onto it
I did a quick test with pngcrush/terminal and pngpong – result was the same
Smush.it is indeed a very good compression tool, but sometimes tools like pngcrush or optipng do a better job.
I use optipng and it’s damn good ! Yes it’s slow but it works really great. On Windows (yes I know, shame on me :p ) I use a .bat file with this in it:
“PathTo\optipng.exe” -o7 %1
Drag & drop and you’re done :)
I’ll do a follow up post where I try all of these methods and see which does the best job. Good suggestions everyone!
i like pngout with .cmd file:
for /F “delims=” %%S in (‘dir /S /A-D /B *.png’) do @pngout “%%~S”
with recursive file scan in subdirs :D
I prefer http://www.smush.it as well. It uses several compression methods to get the smallest possible file size without losing any quality. The difference between smush.it and pngout/pngcrush is ~0.1KB from my tests, and smush.it is more efficient.
@kburn
I’ve tried both scripts, PNGCRUSH and IMAGEMAGICK on a 330kb ‘photobooth’ photo and PNGCRUSH was ultimately better:
PNGCRUSH = 260kb
IMAGEMAGICK = 276kb
In your comparison make sure to compare “Save for Web” in photoshop. I’m curious to see how it stacks up.
I’ve been using macs for over 10 years now and I’m still terminal averse.
@Ryan Florence,
I have compressed images with png crush over 90% of that of Adobe’s “Save for Web”.
http://www.marksanborn.net/howto/compress-images-for-faster-load-times/
@David,
Checkout jpegtran for Jpegs. Also, imagemagic is awesome but I usually use it for a different purpose. For example, image magick can tell you how many colors your image has and you can adjust your png accordingly. Compressing a 24bit png with pngcrush is worthless when you only use 8 colors in your image.
Gracepoint After Five just recently launched punypng (http://www.gracepointafterfive.com/punypng) which combines a lot of the open-source technologies out there. The Ask.com User Experience team that I’m a part of uses punypng as our weapon of choice as well as the Gracepoint Fellowship Church web team. It’s very competitive to smush.it and pngout, and punypng beats them out most of the time (though don’t my word for it, try it out yourself to see).
I think the great thing about something like punypng versus the command-line tools is that you can throw a whole folder at punypng and just let punypng do all the work to figure out which tool is best for the job. Sometimes converting a JPEG to PNG and then compressing it down is better … sometimes jpeg-tran or jpegoptim is better. Punypng just works.
For more info about punypng on the Gracepoint After Five blog:
http://www.gracepointafterfive.com/punypng-making-the-web-a-more-puny-place
This is why I always say, you NEVER stop learning.. I thought I “got it” when it came to graphics optimization.. Been Googling my but off and found out that there’s a whole WORLD of information I didn’t know about.. Especially when it comes to my beloved PNGs.. LOL Good article!
I’ll be watching this blog for the follow-up article.. I’m curious as to how http://www.plasticvicar.com/PNGpong/ stacks up.. I’m a lot like Ryan.. I’m not necessarily terminal adverse, but after years of Macs and WIndows machines, I just prefer a GUI app over command line app.. :)
This is great, but, what about Windows users?
Hassan: Grab Cygwin and install PNGCRUSH on that. Or you could just use Smush.It.
I tried PNGCursh and Smush.it on an uncompressed PNG of 93Kb.
Results
PNGChrush: 90Kb
Smush.it: 87,32Kb
PS Save for web: 87,06Kb
I used the following command line for pngcrush: pngcrush.exe -reduce -brute -e 2.png “%1″
Maybe I am doing something wrong?
@paul: Try punypng.com
I did a comparison of 8 free image optimizer tools, the post is in Spanish but the comparison chart is very easy to understand.
http://www.bitacoradewebmaster.com/2009/10/02/8-optimizadores-de-imagenes-para-web/
So… there a way for non-command line folks to do this via a drag / drop app?
@David Walsh: pngcrush works just fine on Windows too.
http://pmt.sourceforge.net/pngcrush/
@jay: Acorn on the Mac uses pngcrush when you save a png for the web.