Command Line Image Optimization24 Jun 2016
ImageOptim-CLI is a handy little command line tool (OS X only) by Jamie Mason / @fold_left that incorporates ImageAlpha, ImageOptim and JPGmini. It can be automated as a git pre-commit hook for fire and forget front end development, something I’ve found useful.
Add hook to:
JPGmini does carry a price tag at the Mac App Store, so one would need to evaluate if regular use of JPEG calls for it. On the other hand, open source projects ImageAlpha and ImageOptim are pretty much the best tools in class when dealing with PNG.
I took the tool for a spin on this blog. Even though it is not image heavy, over the course of incarnations I have had a few images accumulate in my
public/images folder, currently at a modest 1.5 MB after subtracting sundry animated GIFs. (There are many volumes worth of material to be written about animated GIF optimization and compression, so I will stick to JPEG and PNG for now.) I obtained some large PNG and JPEG images to give a good sample size of 37.8 MB on our test run.
After hitting it with ImageOptim-CLI, the folder’s size became 16.2 MB, a savings of 21 MB or 42.9%. Not too shabby. Now you get to figure out the presentation of your images. Since this is Jekyll, perhaps something simple like using Front Matter to create a photo gallery as in this tutorial: Jekyll Tips. Since we are not using the image gallery anywhere else, it makes sense to do this instead of creating a Jekyll Collection.
Add the image list to the Front Matter on this post:
Then we add code on the post to loop through the array of images. We can even add links to each image to make them clicky, (a highly technical SEO term.)
(Incidentally I learned about using the
raw tag for Liquid templates inside code blocks.) Finally, the CSS to present the images:
The finished result is a quickly-loading, easily-configurable gallery of optimized photos:
I really liked using ImageOptim-CLI and would recommend it to automate the process. Even when not using this command line tool at all, image optimization should be a part of every front end developer work flow.
In closing, ImageMagick must be mentioned as the gold standard of open source command line image manipulation. It allows amazingly fine grain control and has excellent documentation well beyond the scope of this humble post.