loading...
Cover image for TIL: The Best Way to Compress JPG Files with ImageMagick
Feldroy

TIL: The Best Way to Compress JPG Files with ImageMagick

audreyfeldroy profile image Audrey Feldroy ・2 min read

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 by:

audreyfeldroy profile

Audrey Feldroy

@audreyfeldroy

Engineer, artist, and writer. Co-author of Two Scoops of Django and Django Crash Course. Core committer to @danielfeldroy 💘and Uma 🍼 Formerly a RoyGreenfeld.

Feldroy

The little creative company behind Two Scoops Press, Impossible Hero Books, Fuzzy Rainbow, and an upcoming SaaS product.

Discussion

markdown guide
 

Thank you for the article!

Option 3 gave me... Well, a blurred image, even using the unsharp option mentionned in a comment.

Using option 1 gave me better results than plain PHP resizing using gd2, at the cost of a slightly increased file size + processing time.

Stay safe,

 

Thank you !
I'll test the sampling factor.
If the compression is associated with a resize (responsive picture breakpoints) I use a unsharp rule -unsharp 0x0.75+0.75+0.008 to counteract the blurry inherent of resolution reduction.
Also test the webp format.

 

Thanks for the feedback, Clément! About testing the sampling factor, let me know how that goes! Those are good ideas about the unsharp rule and webp...I'll play with those.