Simple Lossless Image Compression
During the migration from WordPress to Eleventy, I decided against the Eleventy standard image transform plugin and decided to just implement the pieces I needed. One remaining piece was automating the compression of images for better web performance. I usually prepare images before adding to the blog by adjusting to the right size and image type. That means in this script I'm sticking with lossless compression to save a few more bytes.
Because this blog system is built by JavaScript, I started by implementing the imagemin package and plugins. The script was quickly put together by Copilot and gave great results. However, I noticed the additional npm package dependencies contained quite a few security vulnerabilities. It turns out that much of the imagemin ecosystem is quite old.
Next I switched to ImageMagick and set up to run locally just on my Mac and just on command. (I might try something more automated in the future). With a little research and a few trial runs, I settled on some good settings for the types of PNG and JPEG files I have on the blog:
magick input.jpg -quality 85 -strip output.jpg
magick input.png -quality 00 -strip output.pngThe resulting improvements:
- JPEG files optimized: 85/126
- PNG files optimized: 158/273
- Total files optimized: 243/399
- Original total size: 25.0 MB
- Optimized total size: 22.8 MB
- Total bytes saved: 2.1 MB (8.6%)