Using GraphicsMagick to Create Thumbnails

Table of Contents

Challenge

When I relaunched my website earlier this year, I deliberately chose a a minimal theme. I wanted to avoid having to manage the various images and other visual assets used by many themes. I want a website that is focussed on the words, not the pictures.

The documents that I'm writing sometimes need screen captures. These images are unavoidable, if I want to produce good documentation. To keep the pages performant, I needed a way to easily and consistently generate thumbnails.

Solution

My solution to the problem is to use the GraphicsMagick application. Using the app to generate a thumbnail is as easy as using the following command:

gm convert -resize 200 path-to-input-file.png path-to-output-file.png

This command resizes the input file to an image with a width of 200 pixels and keeps the aspect ratio. The resized image is then saved in the output file.

I then use ImageOptim to optimise and minify the images.

Benefits

I could achieve similar outcomes using the Image Processing capabilities of Hugo. To do so would require wrapping my head around Page Bundles and Page Resources, which gives me a headache.

The approach of using GraphicsMagick and a static folder is frictionless enough to work fine for now. One of the many good things about using a static site generator is that I can always change my approach later.