Got a bad rating on your website site speed (e.g. from Google PageSpeed Insights)? Did you observe the advise “Properly formatting and compressing images can save many bytes of data”? Don’t panic, here you’ll find a handy solution to optimize your png files on your mac. To optimize your png files you need to install some tools on your mac. There are tools for lossy and lossless optimization and you should install both to experiment with them and find the best solution for your individual use case. To perform the installation of the tools hassle-free I am using the very handy package manager Homebrew for OS X.

 

Lossy optimization with pngquant

1. Install the command line tool pngquant (https://pngquant.org/)  with brew install pngquant. 2. Navigate to your image folder (e.g. type cmd and drag the folder from your finder to the command prompt). 3. Use the command pngquant --quality=65-80 *.png to optimize all your png files. You can also specify individual files too. The parameter --quality enables you to define the desired minimum and maximum quality. This parameter acts similar to the JPEG quality setting. After executing the command you will find the new files named with a suffix of -fs8.png or -or8.png in the same directory.

Lossless optimization with optipng

If you are not totally satisfied with the lossy compression algorithm you can use the tool optipng (http://optipng.sourceforge.net/) which provides a lossless png optimization algorithm. Use the same procedure as above to install and use the tool. 1. Install the command line tool optipng with brew install optipng. 2. Navigate to your image folder within your command line prompt. 3. Use the command optipng -o7 *.png to optimize all png files in your current folder. The parameter -o defines the level of optimization you want to perform. Valid values are from -o0 (lowest compression) to -o7 (highest compression). Attention: The files are replaced instantly. If you want to keep your original files you can use the parameter –backup or use the parameter -dir to specify an output directory. That’s all folks. I hope you enjoyed the short tutorial and we are on a good way to save some bandwidth for our mobile website users.