#node #opensource #webdevelopment #performance

Automated image compression made easy with Merlin

Image compression is an undisputed critical part of performance optimization. For compression there are many tools, whether editor plugins (like Image Optimizer), standalone apps (like ImageOptim) or scripts (like the Node packages of the imagemin family). Yet two problems persist: Tooling doesn’t solve the context problem of image compression, and automation often is unnecessarily complicated.

The context problem is interesting and also something we still work on at sum.cumo – finding a solution for it is important to get the maximum out of compression.

The automation problem, then, we tackled by looking for another, simpler way. That way now allows us to quickly set up a minimum of compression for GIFs, JPG and PNGs in very different projects, with literally one and a half commands and a line of configuration: automated lossless compression that is easy on resources (only images that are being added or changed are checked, and then compressed without regression) and that also updates and feeds back to the source files.

What is this way? imagemin-merlin (short: Merlin), which we’ve just published on GitHub and npm.

Assuming a Node project, image compression through Merlin is set up as follows:

  1. Install Merlin: npm i -D @sum.cumo/imagemin-merlin (ensure the following script in package.json: "imagemin": "imagemin-merlin", so to allow for manual and automatic execution).

  2. Set up a Git hook for pre-commit (for example, through Husky): npm run imagemin -- --staged.

The documentation describes this in a little more detail, and it explains additional parameters. The point is that after installation and setup of a hook, Merlin guarantees GIFs, JPGs and PNGs to always be compressed at a minimum level. This has benefited our projects in the last few months and closed the flank that some graphics had not been compressed at all, or required someone with special technical knowledge to set everything up in more exotic cases. We hope the same applies to you when you try Merlin in your projects.

We’ll now work on additional improvements ranging from new configuration options to additional image formats, and we’ll inform about major updates here (Feed), on Twitter or, of course, on GitHub.