Optimize images and reduce page load times with ImageMagick
| Lastmod: 2019-09-12
Update: I now use Hugo's Image Processing feature for image optimization.
Images often account for the majority of page size, so by making them smaller, you reduce page load times. Enter ImageMagick. This many-featured, open-source software is a solid tool for doing just that.
According to the google developers documentation on optimizing images, compressing JPEGs removes visual details of the image, but the compression ratio can be 10x larger than GIF or PNG. So if it makes sense in your case, convert images to JPEG.
Then there's this idea of serving scaled images. In a nutshell, you want to resize your images to support the largest device that would view them (say, a desktop), but no larger. In my case, the page content's max width 800ish px, so images larger than that don't have much benefit.
For a single image, I'd typically run the below to convert it from PNG to JPEG, resize it (the aspect ratio is preserved by default), and reduce its quality:
magick mogrify -format jpg <img>.png magick mogrify -resize <size> <img>.jpg magick mogrify -strip -quality <quality> <img>.jpg
But what if I need to work on multiple images before posting them? Running the above for each individual image would be time consuming. Thankfully, ImageMagick makes this easy with
magick mogrify -format jpg *.png magick mogrify -resize <size> *.jpg magick mogrify -strip -quality <quality> *.jpg
I've also scripted this so that I don't have to run multiple commands. The Windows and Mac versions of the script are below. They take one argument: an absolute path to a folder of images. Variables
quality should be set to your liking.
800x– only specify the width
800x500– specify width and height
50%– specify a percentage
quality, it's a number between
To learn more, see the ImageMagick mogrify docs.
@echo off set size=800x set quality=85 if "%1" == "" ( echo Please specify an absolute path exit /b ) pushd %1 magick mogrify -format jpg *.png magick mogrify -resize %size% *.jpg magick mogrify -strip -quality %quality% *.jpg popd
An example usage:
#!/bin/bash size=800x quality=85 if [[ -z $1 ]]; then echo Please specify an absolute path exit 1 fi pushd $1 magick mogrify -format jpg *.png magick mogrify -resize $size *.jpg magick mogrify -strip -quality $quality *.jpg popd
An example usage:
A previous post, Townes’ 6 (ish) month photos was originally 9 mb. After running the photos through ImageMagick, the post is right around 4 mb, and there is no visible difference.
Every kb counts, especially on slow connections.
Next: Quotes on resistance
Previous: Townes' 6 (ish) month photos