My first website, Dino’s Ultima Page, turned 18 years old last week. As a website about games, it’s got hundreds of images, mostly screenshots or other images of in-game objects and people. I spent a lot of time manually making thumbnails for most of the larger images, so that pages would load quickly and larger screenshots would be loaded only when requested.

Now, hopefully a little wiser, I know that such things can be automated. I recently showed how to extract regions of an image using ImageMagick, and this software, which I’m growing to love more and more, is also capable of resizing images (among many other operations).

Resizing a Single Image

Many of the games I remember from the early 1990s ran at a resolution of 320×200. Although they would often be scaled up during gameplay, taking a screenshot (in DOSBox, for instance) results in an image that is 320 pixels wide and 200 pixels high.

For an image that I’d like to display on a website, the size is a little annoying. It’s too small to make out much of the details, but possibly slightly too large to use as a thumbnail. I’d like to scale it down to create a thumbnail, but then link to a scaled up version of the image.

Using ImageMagick, it’s pretty easy to resize an image. Assuming the image above is called dsun_003.png, we can create the smaller and larger version as follows:

convert dsun_003.png -resize 640x400 dsun_003-large.png
convert dsun_003.png -resize 200x125 dsun_003-small.png

We call the convert command, passing the following as arguments:

• The name of the original image we’d like to resize
• The -resize parameter, followed by the new size
• The name of the output file where the resized image will be saved

Note that I intentionally chose the new image sizes such that the aspect ratio is preserved (which is usually what you want). If you need to change the aspect ratio, check the Resizing documentation for more advanced examples.

This leaves us with a nice thumbnail and a larger image where we can savour the graphics of 1993:

Resizing all images in a Folder

If we can resize a single image from the terminal, then we should be able to automate this process for a large number of images in a folder, saving a lot of time that would otherwise be spent clicking stuff in an image editor.

For instance, I have a few screenshots from King’s Quest 6 in a folder called kq6. Each image has a size of 640×440 and is of type .png.

I’d like to resize all images in this folder regardless of how many there are. I can achieve this using a loop in bash:

for filename in $1/*.png; do
    convert $filename -resize 320x220 "$1/$(basename "$filename" .png)-sm.png"
done

Actually, the trickiest part of this is to extract the filename without the extension. That’s the part where we’re using basename, which takes the filename as the first argument, and the suffix to trim off as the second. This solution works where we know the image type a priori and all images in the folder are the same type.

You’ll also note the use of $1. That’s simply the first argument to the script, so that we can use the same script in different places, just passing the name of the folder as an argument. In fact, after saving the script as resizeall.sh and giving it execute permissions, let’s call it on our kq6 folder:

./resizeall.sh kq6

This has the effect of creating smaller versions of all the images in the folder, which have the same name except for a -sm suffix before the file extension:

Conclusion

We’ve seen again that ImageMagick is really handy for image manipulation, and the ability to do things from the terminal makes it really easy to automate operations on large numbers of images. In this case, we found it was really easy to resize game screenshots to create thumbnails and larger images to display on a website.

Selecting a rectangular region of an image and doing something with it is an extremely common operation. Even the simplest image viewers (e.g. Microsoft Paint) allow you to do this. While this is easy enough to do by hand, there are times when it’s useful to do it via the command-line, for example:

• The image is too big to load into memory via an image viewer
• You need to extract the same region for many images

In this article, we’ll see how to use ImageMagick to extract a region in an image. Just to give some context, I’m using Linux Kubuntu 19.10 and ImageMagick 7.0.10-23.

Installing ImageMagick

The first thing to do is make sure you have ImageMagick installed. While you can definitely check out the ImageMagick Download page, I’ve found these instructions particularly helpful on Kubuntu.

Analysing an Image

Before we go ahead and use ImageMagick, we first need to study the image that we want to process. Let’s say, for instance, that we’re going to work with the following screenshot from Warcraft II: Beyond the Dark Portal:

There are a few regions of interest that we could potentially extract: the minimap, the selected unit’s portrait, the main view, etc. Let’s say we want to extract the minimap. First, we need to figure out the details of its rectangular region, namely the coordinates of its top-right corner, its width, and its height.

We can do this using most basic image viewers. For instance, Linux distributions using the K Desktop Environment (KDE) have a simple Paint-like tool called KolourPaint. If you use the rectangular selection tool and use it to draw a boundary around the region of interest, the program should tell you the details of interest in the status bar. This is easier to do accurately if you zoom in enough and turn on the grid lines, allowing you to see exactly where your selection fits within the pixel boundaries.

For this particular example, we can see that the region of interest has its top-left corner at the coordinates (22, 24), and it has a size of 132×132.

Extracting the Minimap

All we need is to pass this information to ImageMagick along with the image file, and use the -extract switch to extract the region of interest to a separate file, like this:

magick -extract 132x132+22+24 deathwing.png deathwing-minimap.png

That means: extract a region of size 132×132 at (22, 24) from deathwing.png and save it to deathwing-minimap.png.

And it works beautifully:

Analysing and Extracting the Unit’s Portrait

To extract Deathwing’s portrait, we just need to repeat the same process for a different region. First, we identify the coordinates and size of the region of interest:

Then we use ImageMagick to extract the desired region, as before. Obviously, we change the details of the region and the output filename:

magick -extract 52x44+6+166 deathwing.png deathwing-portrait.png

And the result is as we expect:

Conclusion

This is great, especially because you can do the analysis step once and repeat the command on many images that have the same structure. For instance, if I wanted to create a website with information about each unit in Warcraft 2, I would just need a screenshot for each unit. I could then simply run a command on each image, and extract the units’ portraits with ease.