DEV Community

Cover image for TIL: The Best Way to Compress JPG Files with ImageMagick
Audrey Roy Greenfeld for Feldroy

Posted on

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.

Top comments (5)

Collapse
 
rkyoku profile image
Renaud Kyoku

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,

Collapse
 
dolo profile image
Clément Larduinat

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.

Collapse
 
audreyfeldroy profile image
Audrey Roy Greenfeld

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.

Collapse
 
fabio_tosto_62efa91d01bd0 profile image
Fabio Tosto
Collapse
 
vamshi profile image
vamshi

Thanks for your article..
It helped me get the best image compression output for my website ( compressjpeg.online).