DEV Community

loading...

A bash script for creating image thumbnails using ImageMagick

preciouschicken profile image Precious Chicken Originally published at preciouschicken.com on ・2 min read

Recently Google Search Console has been alerting me to mobile usability issues, specifically content wider than screen:

Google Search Console

Digging further I found the problem was how my blog generating software, Hugo, was linking to images. Typically I insert images into markdown as so:

[![Your message here](https://www.preciouschicken.com/blog/images/taste_of_react_your_message.png)](https://www.preciouschicken.com/blog/images/taste_of_react_your_message.png)
Enter fullscreen mode Exit fullscreen mode

The image URL features twice: the first one displays the image on page resized to fit the theme; the second provides a 'clickable' link to the actual image should the user want to see the image in its full, actual size.

The issue that Google Search Console has is that I am providing an image that is too large and the browser is having to resize on the fly to fit the content. It would be far better to provide a smaller image for display (at the size it appears in the browser), e.g. a thumbnail, while still providing the link to the bigger image. Like so:

[![Your message here](https://www.preciouschicken.com/blog/images/taste_of_react_your_message-thumb.png)](https://www.preciouschicken.com/blog/images/taste_of_react_your_message.png)
Enter fullscreen mode Exit fullscreen mode

As I already had a folder full of images I decided to automate this with a bash script:

#! /bin/bash 
# Sets the desired thumbnail width
WIDTH=630
# Loops through all png files in current folder
for i in *.png
do
    # Stores the width of the current file
    iwidth=`identify -format "%w" $i`
    # Checks current filename does not end with '-thumb' and
    # file is greater than desired width
    if [[ $i != *-thumb.png ]] && [ $iwidth -gt $WIDTH ]
    then
        # Stores filename without extension
        filename=`basename -s .png $i`
        # Creates thumbnail and adds -thumb to end of new file
        convert -thumbnail ${WIDTH}x $i "$filename-thumb.png"
    fi
done
Enter fullscreen mode Exit fullscreen mode

This loops through all the png files in the current folder, checks that they aren't a thumbnail (as indicated by a -thumb.png suffix), that they are bigger than the content and then resizes them using ImageMagick - an image conversion tool which is installed by default on many Linux distributions.

To run this copy and paste the text above to a new file, e.g. thumb_create, make it executable and run it, e.g.:

chmod u+x thumb_create
./thumb_create
Enter fullscreen mode Exit fullscreen mode

You should now be left with a folder full of original images, plus resized thumbnails as indicated by -thumb.png. Apart from any original images which are smaller than the width you specified - these will not have a thumbnail created. The script can be run as many times as you want, on subsequent runs it will ignore any files it has already generated (e.g. those ending -thumb.png).

NB - It could also probably be optimised: checking the filename prior to storing the width would likely speed things up.

Discussion (0)

pic
Editor guide