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.
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Introducing MooTools Templated]()
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:
new Element Madness
The first way to create UI-driven...
![Create a Simple Slideshow Using MooTools, Part II: Controls and Events]()
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:
Adding "Next" and "Previous" controls.
Adding...
![Table Cell and Position Absolute]()
If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element. Chrome? Check. Internet Explorer? Check. Firefox? Ugh, FML. I tinkered in the console...and cussed. I did some researched...and I...
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..
Could you elaborate on how image-magick can compress PNGs? I can’t seem to see anything in the documentation on how to do it. It is an amazingly powerful program, so I am sure I am missing something.
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.
Not sure if it’s because of a mac or something but I don’t think it should take 10 minutes. On my windows machine the operation was almost instant.
A little late (half year xD).
The script is very useful for using pngcrush. I’m using it to reduce the size of hi resolution zelda images. Yeah!
But I’ve had problems with file names containing spaces. This little modification can do the trick.
#!/bin/sh
find $1 -name "*.png" | while read png
do
echo "crushing $png"
pngcrush -brute "$png" /tmp/temp.png
mv -f /tmp/temp.png "$png"
done;
I use http://optipng.sourceforge.net/ and it is kind of cool enough for me. :)
A nice idea for handling a lot of PNG in the context of website development would be to dynamically separate the image data from the alpha channel on the server, optimize both of them separately and recombine them using the canvas element and some JavaScript in the browser. Ta-Da! Works with all modern browsers.
Here is explained how it’s done:
http://headers-already-sent.com/artikel/shrinkimage-1/
You’ll also find a complete ZIP package with the PHP script and a jQuery plugin. Let us know what you think about this.
What about http://tinypng.org/
Has anyone tried it.
@parvez, http://tinypng.org/ works wonders.. PNGCrush & Smush.it could reduce my image down to 23KB from 25, PunyPNG offered savings up to 16KB with lossy compression if I upgraded to their ‘pro plan’, however TinyPNG brought it down to 8KB with lossy compression and it’s a free service. It preserved full alpha transparency and my eyes cannot spot a single difference from the original. Thanks for the recommendation, using this site from now on and donating soon.
I would like to add that Yahoo’s “smush.it” is great for losslessly reducing images, e.g. JPEG ;)
I can recommend this service:
http://tinypng.org/
They strip off meta data but too compress the image data as well. purists may complain, but the results are very good, in deed, for file size and image quality…
Source Image/No Alpha/24-Bit PNG (401,9 KB):
216,3 KB with tinypng.org
375,7 KB with PNGpong
381,3 KB with Yahoo Smush.it
@Conrad Chu:
Your service isnt free for image sizes above 150KB :-( You are inventor of this software and also running this paid service. So I have to consider your comment here to be spam?
I can recommend this service:
http://tinypng.org/
They strip off meta data but too compress the image data as well. purists may complain, but the results are very good, in deed, for file size and image quality…
Source Image/No Alpha/24-Bit PNG (401,9 KB):
216,3 KB with tinypng.org
359,5 KB with pngCrush (ImageOptim, OS X-GUI for pngCrush)
375,7 KB with PNGpong
381,3 KB with Yahoo Smush.it
@Conrad Chu:
Your service isnt free for image sizes above 150KB :-( You are inventor of this software and also running this paid service. So I have to consider your comment here to be spam?
PS: Why cant I post a comment here? No feedback on user action??!
Try http://compresspng.com
It’s much better than tinypng.
Hey guys, TinyPNG uses http://pngquant.org/ which has a GUI port for windows called PNGoo.
Also check out http://kraken.io/ for any lossless optimization.
I must say that GIMP beats them all. At least on small images (like those that you convert to datauri)
photoshop gave me 900 byte
imagemagik – 300
pngcrush -300
GIMP – ….. 120!!!!
just do
$gimp 1.png
ALT-f w CTRL-Q
another vote for http://tinypng.org/