Image Compression: How to Super-Easily Set Up Automated Base Optimization
Post from June 24, 2019, filed under Web Development.
In Understanding Image Compression I’ve talked about the two main parts of graphics performance optimization: tooling and context. Now, tooling is generally rather easy. It’s also easy if one does not know all about context and therefore wants to err on the safe side using lossless compression; it’s even easier with a tool I’ve developed for sum.cumo, one which Sven Wagner then refined, Merlin.
Figure: Three shortened steps to bliss.
What I set out to solve with Merlin, and for sum.cumo, was the problem that lack of information of each project’s use of images (context), or inertia to gather that information, led to projects not compressing images, sometimes at all. I had also disliked that sometimes graphics would only, and then repeatedly, be optimized in production—without feeding back into repositories, even when that was safe and desirable. And I had disliked that although all projects used Node, automating compression (and becoming more efficient by doing so) still depended on project specifics, as things only got simpler when, say, webpack was used than when it wasn’t.
Merlin, or really “imagemin-merlin” so to reflect it being based on the imagemin family, was therefore built to set up automated compression both easily and safely. And so after a couple of months of testing at sum.cumo, Merlin got released to the public the other week, and I’d now like to keep it “DRY” and just point to the GitHub project and the npm module for setup and more detailed documentation. It’s really easy, and I—or the reorganized sum.cumo open source team, respectively—will be looking forward to your feedback.
Give Merlin a try, and never worry again about forgetting to have all your graphics compressed at least losslessly. After that, of course, get the maximum out of all of them.
About the Author
Jens Oliver Meiert is a technical lead and author (sum.cumo, W3C, O’Reilly). He loves trying things, including in the realms of philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.
If you have any thoughts or questions (or recommendations) about what he writes, leave a comment or a message.
Have a look at the most popular posts, possibly including:
- The Problem with Web Development Checklists, or: The Frontend Checklist, Revised
- 13 Leadership Mistakes and How to Avoid Them
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out the, at least some of the most important aspects of such CSS.
Looking for a way to comment? Comments have been disabled, unfortunately.