These days, theres a lot of focus on reducing the load times on your website to make the experience smoother for your users. One way is to make creative use of CSS to style your websites instead of using images. That said, there are times when you have to use images and even the best front-end guys need to reach for images depending on what kind of design they were tasked with implementing.

If you’re using PNGs, likely you’re already choosing to save them in a way that optimises them for the internets, but even then there are savings to be had by employing the use of lossy PNG optimisation.

On the project that I’m on at the moment, the front-end guys (for better or worse) went with making heavy, heavy use of images, almost all of them PNG files. I decided to try throwing them into two optimizers PNGNQ, and pngquant to see what I could get out of them.

Before we begin, I should be clear that this post focuses on OSX users and assumes you have Homebrew already installed and updated (brew update).

PNGNQ

First, install the tool by running brew install pngnq

Next, navigate to your project folder, back it up (via some kind of version control like Git) and run:

find . -type f -name '*.png' -print0 | xargs -0 -P4 pngnq -f -e '.png'

The above command will recursively look through your directory for PNG files and send them to pngnq for optimisation. The above command also has -f -e '.png' which means it will override the current PNG files once they are optimised.

After running the above, I noticed around 50% savings in file size across all the PNG files. Quality was around the same, minus for some unsightly dithering on one of our icons (for the record, I also played around with various pngnq options, but it didn’t make much difference in terms of alleviating said artifacts)

PNGquant

I decided then to give pngquant a try to see if I could get better results.

I ran brew install pngquant

Then

find . -name '*.png' -print0 | xargs -0 -P4 pngquant --ext .png --force

I noticed pretty much the same file size savings, but without the unsignhtly artifacts !

Conclusion

In my case, PNGquant gave me better results than PNGNQ, but your mileage may vary.