Compressing PNG Images from the Command Line

I’ve done gone and rebuilt this website once again.

See those little ‘me’s at the top of each page? They are were the biggest files being loaded across the wire when you visit a page on this website. For the sake of saving bits and bytes, I figured I’d shrink the images dimensions down from their original size to the size you see them now (80 pixels2 × 2).

Starting out with a bunch of files that were 398 pixels2 , and after a quick bit of Google-foo, I discovered that my mac had a secret tool on it called sips - The scriptable image processing system

So, this should be fun. From the directory where I keep the images (and after I’d made a backup copy of the originals) I ran the following:

$ sips -Z 180 *

And like magic, all the files had halved in size, dimensionally at least. The -Z flag tells sips to “resample [an] image so height and width aren’t greater than specified size”, the 180 is the size that I wanted sips to output, and the * is a special character in your bash shell/command line that kinda means ‘all the files in this directory’.

$ du -hs ../*
900K  images
1.7M  images_original

Wooo, that is, I think, a 47.2% decrease in the size of the images (there’s quite a few in those directories). Let’s see if we can do one better though.

I used Homebrew to install a tool called pngquant - “a command-line utility and a library for lossy compression of PNG images” - though at a glance this tool is also available in the Debian repositories if that’s your thing.

$ brew install pngquant
$ pngquant --version
2.12.0 (January 2018)

Let’s give it a burl then, shall we? I’m working with the already-resized versions here, for those following along at home.

$ pngquant --quality=65-80 --speed 1 *.png

The command-line options are documented here, or you can run pngquant –help to view them in your terminal.

This time around the files weren’t ‘edited in place’, so to speak, but compressed copies were made with -fs8 appended to their name - ie, spatula-fs8.png. The following command will remove the “-fs8” from the compressed PNG files, but it will also overwrite the originals, which is fine by me at this stage:

$ find . -name '*-fs8*' | while read f; do mv "$f" "${f//-fs8/}"; done

Now for the second moment of truth:

$ du -hs {original,sips,pngquant}
1.7M  original
900K  sips
308K  pngquant

I like where this is going. At a glance I can’t really tell that much of a difference between the original and compressed/shrunken versions of the images.

Wait, what’s that?! Another wild PNG optimiser appeared!

$ brew install optipng
$ optipng -o7 *

73 bytes saved Ok, so I knew I was pushing it by this stage so I didn’t really expect for there to much of a difference made as these images had already been compressed using pngquant.

After running optipng once again, this time on the shrunken-but-not-optimised files, the final comparison is in and it’s clear to me that we have a winner:

1.7M  original
900K  sips
308K  pngquant
816K  optipng

Looks like for a quick & easy way to shrink & compress PNG files for use on the web, a combination of sips for resizing and pngquant for compressing is a good combination.

Categories: Tech

‹ Previous Post Next Post ›