TIL: The Best Way to Compress JPG Files with ImageMagick
Audrey Roy Greenfeld
Posted on April 9, 2020
Got a JPEG that's too big to upload?
Lazy to open Photoshop?
ImageMagick to the rescue!
What Is ImageMagick?
ImageMagick is a tool for editing images. When you install it, you can type convert
at the command line (followed by whatever parameters you want) to resize, optimize, distort, and draw on images.
If you don't have it yet, follow the instructions at imagemagick.org to install it. (I did brew install imagemagick
to get it onto my Mac.)
How Do You Compress JPG Files With It?
Honestly, every time I've needed to optimize images, I've always googled "imagemagick convert compress jpg" and copy-pasted from StackOverflow.
Today I decided it's time to:
- Learn which
convert
arguments/parameters are best for balancing quality with file size - Write it up on here as a handy copy-paste reference for future me
Let's now look at the top two ImageMagick JPEG compression strategies from this StackOverflow post, then try combining them.
Option 1: Lighthouse Compression Strategy
According to one StackOverflow poster, this strategy focuses on following Google Lighthouse's guide on how to pass the "Optimize Images" Lighthouse audit in Chrome DevTools:
convert feldroy-512x512-unoptimized.jpg \
-sampling-factor 4:2:0 \
-strip \
-quality 85 \
-interlace JPEG \
-colorspace RGB \
feldroy-512x512-pagespeed.jpg
Note: Lighthouse was formerly Google Pagespeed Insights.
Option 2: Gaussian Blur Strategy
This strategy was the most upvoted post on StackOverflow due to its age (2011). It's also quite good. Blurring smooths out any high-frequency color and tonal changes:
convert feldroy-512x512-unoptimized.jpg \
-strip \
-interlace Plane \
-gaussian-blur 0.05 \
-quality 85% \
feldroy-512x512-gaussian.jpg
Option 3: Combined Strategy
Combining the above 2 options, we get:
convert feldroy-512x512-unoptimized.jpg \
-sampling-factor 4:2:0 \
-strip \
-quality 85 \
-interlace Plane \
-gaussian-blur 0.05 \
-colorspace RGB \
feldroy-512x512-combined.jpg
Results
As you can see, the combined strategy (Option 3) had the best results with my test JPEG:
$ ls -lh
total 360
-rw-r--r-- 1 arg staff 23K Apr 9 10:55 feldroy-512x512-combined.jpg
-rw-r--r-- 1 arg staff 28K Apr 9 05:30 feldroy-512x512-gaussian.jpg
-rw-r--r-- 1 arg staff 27K Apr 9 05:21 feldroy-512x512-pagespeed.jpg
-rw-r--r--@ 1 arg staff 95K Feb 24 06:57 feldroy-512x512-unoptimized.jpg
Looking at the original and resulting files side-by-side, they all looked good to me, though someone with better eyesight may be pickier:
Other Things to Know
You can also use ImageMagick to resize images to smaller pixel dimensions or even convert between file formats (like .png to .jpg). Here's an article by @listnux showing cool things you can do with it.
Finally, if you have a better way to compress jpg files with ImageMagick convert
or even other tools, I'd love to hear your tips.
Posted on April 9, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.