TIL: The Best Way to Compress JPG Files with ImageMagick

audreyfeldroy

Audrey Roy Greenfeld

Posted on April 9, 2020

TIL: The Best Way to Compress JPG Files with ImageMagick

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 


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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 


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
audreyfeldroy
Audrey Roy Greenfeld

Posted on April 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related