If you develop a website or have to move png image around over slow networks you want to get png files as small as possible. Although Photoshop and other apps can compress and optimise the png files to some extent, to get them as small as possible it is best to use a compression tool that removes other data and optimises the image to be as small as possible without losing image quality. One of the best tools out there is pngcrush. Its a command line program run in Terminal that can compress an image to around 70% of the original size. This post will show you all of the different methods you can use to install the binary file and how to use the app.
What Is pngcrush
A png is an image file that has become very popular on the Internet over the last couple of years. It allows high resolution graphics, lossless compress (no jpeg artifacts) and transparency. This website uses png files to display the various images on your screen. When you save a png file in your favourite editor it will save various other bits of data in edition to the image data to as colour profiles, gamma, and other blocks of data. This data adds to the file size and increases the time it takes to download the file. If you want your website to run faster you need small image files. Smashing Magazine expands on some of the methods in optimising a png image.
Pngcrush takes your png file and based on your settings will remove the data your don’t need. Leaving a optimised reduced file around 70% the original size, with no loss in quality. This is very useful if you want a light weight site to reduce the amount of bandwidth used. Pngcrush is easy to install on most unix based operating systems, however it is a bit more of a problem on a Mac as the OS doesn’t have some of the tools needed to get the program to work. However this post will tell you how.
Installing with a Make File (Normal Method)
The quickest and normal method of installing pngcrush is as follows. This requires XCode at least. If you don’t have this installed you can either install XCode or download the binary below.
Step 1) Download pngcrush. Either the tar.gz or zip
Step 2) Open Terminal from Applications > Utilities
Step 3) Naviagate to where the folder where you have downloaded with pngcrush using
Step 4) Extract with the following command, change the version number as required:
tar -xvzf pngcrush-1.7.5.tar.gz
If you have downloaded the zip file enter the following:
Step 5) Make the pngcrush binary by compiling the source code you have downloaded:
Step 6) Copy the binary to a place on your hard drive that Terminal looks in for the binary files used when running Terminal.
sudo mv pngcrush /usr/local/bin/
This now means every time your type
pngcrush into Terminal the command will run. If Terminal can’t find the binary command after you have moved the file, restart Terminal.
This is very simple, however you will find you have problems on step 5. The make command is not installed be default on your Mac, you need to install XCode or MacPorts. If you don’t want to do this jump to the Binary File section.
XCode / Mac Ports
XCode is a free development kit for the Mac that allows you to develop apps for your Mac. When you download an install it, the make command will be found in /Developer/usr/bin . You can now re run step 5 and pngcrush should compile, if it doesn’t you can put the full path to make in the command line. The problem with XCode is that it is a big download and the latest version, requires the latest version of Mac OS. This is a problem because I am running Snow Leopard.
Alternatively you can install MacPorts, and follow the instructions for installing the software and then installing pngcrush. However this is still time consuming and still needs the latest version of Xcode. It is still a bit long winded. The quickest method is to install the binary file.
Binary File (Quickest Method)
If you don’t want to install XCode or MacPorts you can download the binary file. It took a lot of digging to find this site, basically some body downloaded the source file, compiled them with the make command and put the binary file on the Internet. Very useful.
Step 1) Go to hmug and download the binary file for your OS. Download OS7 for Lion users or OS6 for Snow Leopard users. Although it doesn’t make much of a difference if you download the wrong file.
Step 2 ) Unzip the file in Finder:
Step 3) Move the binary file to /usr/local/bin. This can be done by using Go > Go To Folder in Finder and typing in the directory. You will need your admin password to make the move.
Step 4) Profit
Downloading and moving the binary file to where it is needed is very simple and easy. A lot quicker than using the other commands and having XCode installed. Hmug have a lot of binary files on there site so have the website bookmarked for later.
Now we have pngcrush installed we can now crush a png file. In Terminal change your directory to where you keep your png files and type the following:
pngcrush -reduce -brute originalfile.png newfile.png
This will crush your png file down and depending on the will be about 70% smaller. To make it even smaller I recommend you add you use the following to remove the colour correction data.
pngcrush -rem allb -brute -reduce originalfile.png newfile.png
You can read the man file, to see all of the options you can use. The reason the option brute is added to ensure you get the best compression, it takes a while but you get the smallest file size.
Loop Through A Directory Of File
The normal method of using pngcrush is simple if you have one or two files you want to crush. However if you have a folder full of images this can take a long time to manually add each file as there is no loop option built into pngcrush. Therefore you need to set up a simple loop. David Walsh, has a useful loop that can go through a directory of images. To create this script you need to do the following:
Step 1) Open up TextEdit and type:
for png in `find $1 -name "*.png"`;
echo "crushing $png"
pngcrush -rem allb -brute "$png" temp.png
mv -f temp.png $png
Step 2) Save the file, for example in the root of your hard drive, append the file name with .sh, for example “crusher.sh”
Step 3) Open up Terminal, navigate to the folder where you saved the file and type the following:
chmod +x crusher.sh
Step 4) In Terminal navigate to the folder above where your images are stored. For example if you images are stored in /User/James/image/png, naviage to /User/James/image
Step 5) In Terminal again type (assumes crusher.sh is located in the root of you hard drive, alter the file path if it is stored somewhere else):
Where png is the folder containing all of the images.
The script will look through the folder and all sub-folders and compress every png image it will find. If you have a multi core Mac, run this command in new Terminal window for every CPU core you have. This is because pngcrush will only run at 100% on one core. Since it can take a while we want to speed up the process. For example if you have folders containing 2012, 2013 etc. In Terminal type
/crusher.sh 2012, then in a new Terminal window
/crusher.sh 2013 and so on.
The pngcrush is one of the best crushing apps out there. However, if you don’t want to install pngcrush and want a simple app there is plenty out there. A very good web based service is PunyPNG, that can get some excellent compression for the odd file. However you can only do one file at a time unless you want too pay.
Another excellent app is PNG Compressor, its has a drag an drop interface which means you can do folders of imagess at a time. The compression results are good, and only slightly worse than pngcrush. It costs $2.99 and gives excellent results.
Hopefully you have understood the various different methods. I prefer downloading the binary as it is the quickest and easiest. There are many ways to install and use pngcrush so hopefully there is a method for everyone.
If you have any questions, please leave a comment below.