Batch Lossy Compress PNG with pngquant Linux Command Line

by

Image optimization is critical for high performing websites. The smaller your images are the less space they take up which is great for desktop and mobile users. Lossy compression yields smaller file sizes than lossless compression. Lossy Compression of PNGs can be done with pngquant hosted on github. This guide will show you how to batch optimize all of your PNG images with pngquant and lossy compression.

If you’d like to test this on some sample images you can use these Fire Elements.

Potential Savings after Lossy Compression

Using this Blizzard test image which is 588 KB.

After lossy compressing with pngquant it was 56 KB.

For your own image optimization tests I suggest getting the size of the folder first with du.

du -sh foldername

Output shows 124 MB.

124M    Fire-Elements-by-psdbox

Let’s squash those images.

Batch Lossy Compress PNG with pngquant Command Line

Install pngquant from the from the repository

sudo apt-get update
sudo apt-get install pngquant -y

Check your pngquant version

pngquant -V

You may see a slightly older version

2.0.1 (September 2013)

You can build from source if you want the latest and greatest.

Build pngquant from Source

To build the latest pngquant, install these packages

sudo apt-get update
sudo apt-get install build-essential liblcms2-dev libpng-dev git -y

Enter our temporary directory and clone the latest pngquant

cd /tmp
git clone https://github.com/pornel/pngquant/
cd pngquant*
./configure --prefix=/usr

You should see output similar to this

  Compiler: gcc
     Debug: no
       SSE: yes
    OpenMP: no
    libpng: shared (1.6.25)
      zlib: shared (1.2.8)
     lcms2: shared (2.6)

Now actually compile pngquant

sudo make
sudo make install

Check the version of pngquant now

pngquant -V

There we go

2.8.2 (December 2016)

Basic pngquant Syntax

Here is the general pngquant syntax. It will do quality analytis between 40 and 100, strip meta data and skip the file if it is not smaller than the original. The output file is output.png.

pngquant --force --quality=40-100 --skip-if-larger --strip --verbose input.png --output output.png

Because the --verbose flag is set you get some information about pngquant’s process.

conserving memory
 read 589KB file
 made histogram...33 colors found
 eliminated opaque tRNS-chunk entries...0 entries transparent
 mapped image to new colors...MSE=0.000 (Q=100)
 writing 33-color image as output.png
Quantized 1 image.

Check the quality of the compressed png and if all is well then you can batch optimize.

Batch Optimize PNGs with pngquant

To batch optimize all of your png files with pngquant and overwrite the originals, use this command in your uploads folder.

/var/www/wp-bullet.com/wp-content/uploads is the folder containing your uploads.

find /var/www/wp-bullet.com/wp-content/uploads -iname "*.png" -exec pngquant --force --quality=40-100 --skip-if-larger --strip --verbose \{} --output \{} \;

Check the size after batch optimizing

du -sh foldername

The sample images are way smaller, 12 MB 🙂

12M    Fire-Elements-by-psdbox

Enjoy your smaller images and faster load times.

Sources

How to Optimize PNG Images