PNGCRUSH a Directory of Images
One easy way of reducing website load time is by optimizing your images. PNG graphics are often more bloated than they need to be so using PNGCRUSH should be a no-brainer. PNGCRUSH's basic usage provides only single-file-crushage but I've created a script that crushes PNGs in directories recursively.
The Bash Script
#!/bin/sh for png in `find $1 -name "*.png"`; do echo "crushing $png" pngcrush -brute "$png" temp.png mv -f temp.png $png done;
Do whatever you can to compress your images so that your website will load as quickly as possible. PNGCRUSHing your images does not cause a loss of quality -- only a loss of excess file size! PNGCRUSHing my images saved over 120KB of bloated imagery for the recent redesign.
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
heh, this post is so engrish: “so that your website load as quickly” and “does not cause a lose of quality”. mootools crew must be whipping you hard then :)
pngcrush… was this something you found on your mac thingie? most inconsiderate of “normal” windows users :D
Holy crap. In my defense this was a really late night post. Weak. My bad.
Totally untested, but for windows users, as long as everything is in the one spot….
Create a batch file called “crush.bat”
Put the following code in it.
@echo off
for /f “tokens=*” %%x in (‘dir /b *.png’) do (
echo “crushing %%x”
pngcrush -brute “%%x” temp.png
move /Y temp.png “%%x”
)
Then run it.
Is there a way to do this with PHP? Or something a bit more practical?
@Ben: What’s impractical about this?
@David Walsh: I don’t know how to run bash scripts :)
Oh — in that case, try this:
http://pornel.net/imageoptim/en
Extended:
scriptname [-d directoryname]
[code]
#!/bin/sh
#
dflag=
while getopts 'd:' OPTION
do
case $OPTION in
d) dflag=$OPTARG
;;
?) printf "Usage: %s: [-d directory]\n" $(basename $0) >&2
exit 2
;;
esac
done
shift $(($OPTIND - 1))
if [ "$dflag" ]
then
# DO DIR PNGCRUSH
for png in `find $dflag -name "*.png"`;
do
echo "crushing $png"
pngcrush -brute "$png" temp.png
mv -f temp.png $png
done;
fi
[/code]
It’s even easier than that, pngcrush supports * for selecting images to crush. Try: ‘pngcrush -d “/Users/rd/crushedimages/” *.png’ to crush ALL png images in the current directory and put the resulting files in “/Users/rd/crushedimages/” (change this to a directory of your choosing!
i think this was a great post. it has helped me much. thank you
Very useful script!
In terms of usability and performance, under windoes, it doesn’t get better than this for a gui – http://pnggauntlet.com
a great feature is that you can simply drag/ drop images, and it will ‘smash’ them,a nd overwrite the original files on the fly.
for example, pull your entire website to a local folder, search for *.png in win explorer, then simply drag/ drop the query results into pnggauntlet, making sure to check the ‘overwrite original files’ box, and let it smash down the file size.
i just tested this workflow on a massive ecommerce website (about 2700 png’s worth about 40mb) and saved a whopping 3mb. of course, who knows how well the originals were optimized, but nonetheless, it’s a great result.
another great feature is that it can optionally convert from jpg, tiff, gif and bmp to png.
I was searching for some information on jpgcrush and google assumed I meant pngcrush… Anyway for anyone who is interested I have several tutorials on this subject (in python) one of which will make use of multiple processors (which saves quite a bit of time if you have a tonne of pngs.)
http://www.ragingsloth.com/softwareEng/PNGOptimizerIndex.html
Simplest way to do this.
1. Create a folder for executables which will go into your PATH directory reference.
2. Open folder containing PNGs you want to crush
3. shift + right click in empty space in folder, “open command window in folder”
4. type “pngcrush -d “crushed” *.png
5. close command window and go to newly created ‘crushed’ folder, which now contains your optimised PNGs.
Simplest way to do this.
1. Make sure that pngcrush.exe is in a folder which is mentioned in the PATH directory reference, so it can be used from the command line.
2. Open folder containing PNGs you want to crush.
3. shift + right click in empty space in folder, “open command window in folder”
4. type “pngcrush -d “crushed” *.png
5. close command window and go to newly created ‘crushed’ folder, which now contains your optimised PNGs.