Got a JPEG that's too big to upload?
Lazy to open Photoshop?
ImageMagick to the rescue!
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.)
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
convertarguments/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.
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.
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
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
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:
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: