Use ImageMagick to quickly and easily process images for your blog

When writing a blog post about a technical topic, I often capture a lot of screen shots that I need to edit before adding them to my blog article. Usually I want to add a border around each image and I sometimes want to reduce the size of images that are too large. I want to do this quickly and easily so I use ImageMagick, an open-source command line image editor.

ImageMagick is a powerful image manipulation tool with an intimidatingly large set of options and subcommands. However, most bloggers will use only a few simple options. In this post, I will show how to install and use ImageMagick to perform the simple image conversions bloggers typically need. I will show how this can be done on each of the major operating systems: Linux, Windows, and Mac OS X.

ImageMagick overview

ImageMagick is a software suite that creates, edits, composes, or converts bitmap images. It can read and write images in over 200 formats. We may use ImageMagick commands to resize, rotate, and transform images, adjust image colors, apply various special effects, or draw text, lines, and shapes. ((From the ImageMagick web site: http://www.imagemagick.org/script/index.php))

It takes too long to edit a large number of images one by one in an image editor like Photoshop or Gimp. Using ImageMagick makes it easy to batch process all images in a folder by entering a simple command. You may also incorporate ImageMagick into shell scripts, batch files, or other programs to automate the preparation of images for your blog.

ImageMagick may be used to perform a wide variety of graphics editing tasks and can even be used to create new images from the command line. To learn more about what ImageMagick can do, see the ImageMagick documentation and also see the ImageMagick examples page.

Installing ImageMagick

If ImageMagick is not installed on your computer yet, skip to the end of this post to see how to install ImageMagick on either Linux, Windows, or Mac OS X.

The command line

While ImageMagick provides a basic graphical user interface, it is easiest to use from the command line. One can create a set of commands and save them in a text file, then copy-and-paste commands from that file whenever they are needed. This makes is easy to perform common image editing tasks. One may also create scripts that run ImageMagick commands, but scripting is a more advanced topic not covered in this post.

Most Linux users will be familiar with the command line but Windows and Mac OS users may not have had a reason to use the command line until now. Below, I show how to access the command line in each of Linux, Windows, and Mac OS.

Linux command line

To access the Linux command line, use a terminal application. Every Linux distribution comes with a terminal application.

Click on the Application Menu and look for Terminal, Terminal Emulator, or Xterm. Start the application and you will see the terminal window with a command prompt waiting for your input.

Windows command line

Microsoft Windows provides a command line program called cmd, also called the Command Window.

You may start the command window from Windows Explorer by clicking on the Address Bar and typing cmd. The command window will open with a command prompt ready for input. You should see it is open to the folder path that was open in Windows Explorer.

Alternatively, while in Windows Explorer hold down the Shift key and right-click the folder containing the images you wish to edit. Then click on Open command window here in the context menu that appears. The command prompt will appear with the path to your image folder already set.

Mac OS X Command Line

The Mac OS X command line is accessed using a program called Terminal. Search for Terminal in the SpotLight search function or navigate to the Applications folder.

Start the Terminal application and you will see the terminal window with a command prompt waiting for your input.

Processing images from the command line

The ImageMagick commands that modify images are mogrify and convert. By default, the mogrify command overwrites the existing image with the modified image unless you specify an output folder into which modified image will be saved. The convert command saves a new modified image and leaves the original unchanged so it is safer to use.

The mogrify command is more useful for converting a batch of images because works with wildcard characters in the filename field. The convert command does handle wildcard characters in filenames very well and works best with single files.

Add a border

To add a border to an image use a command like either of the ones below (assuming a directory named Newimage is in the current directory):

$ mogrify -path Newimage/ -border 1x1 -bordercolor "#000000" image.png

$ convert -border 1x1 -bordercolor "#000000" image.png Newimage/new-image.png

The above commands open the image image.png, adds a one pixel wide black border to it and saves the bodered image to the Newimage directory. The mogrify command outputs the same filename. The convert command may use any output filename you specify.

The “-border 1×1” parameter specifies a border 1 pixel wide all the horizontal edges and one pixel wide on the vertical edges, and the -bordercolor “#000000” specifies the color black.

Resize an image

When preparing an image for a blog post, I usually need to reduce the width of a large image. For example, I may have a screen capture that is 1920×1080 pixels and I want to reduce it so I have an image that is only 600 pixels wide. I also want the aspect ratio of the image to be maintained after it is shrunk.

To reduce an image’s width to 600 pixels while maintaining the aspect ratio, and to avoid increasing the size of the image if it is already smaller than 600 pixels wide, use either of the commands:

$ mogrify -path Newimage/ -resize "600>" image.png

$ convert -resize "600>" image.png Newimage/image.png

The > flag after the pixel-width parameter ensures that smaller images will not be resized up to 600 pixels wide but will instead be saved unchanged, with the new file name.

More resizing options

If you wish to resize an image vertically, ignore the image’s aspect ratio, or make some other size transformation, see the Image Geometry section of the ImageMagick user guide.

Changing file types

The convert command lets you convert the image file type to another file type. For example, it can open a PNG image, convert it and save it as a JPEG image. By default, most screenshot programs output to PNG format and you may wish to convert those to JPEG or GIF in some cases, such as when JPEG might provide a smaller file size for a photograph-like image.

To convert in the simplest way, just use a different image format extension in the output file name. See the example below:

$ convert image.png Newimage/image.jpg

The convert command lets you specify the output filename so, if you wish, you may save the output to a new file name such as new-image.jpg.

Conversion parameters

The convert command may include parameters such as quality or gamma, which modify affect how the output image will appear.

The most common parameter you would use is the quality parameter when converting to JPEG foramt. The default JPEG qualilty is 92% but you may set it to any value from 0% to 100%.

For example, to convert all the PNG images in a directory to JPEG with 70% quality, enter the command:

$ convert -quality 70 image.png Newimage/image.jpg

Combining transformations

You may enter multiple parameters in the same command. For example, to resize an image, add a border, convert it from PNG to JPEG with 70% quality, and save it with a new filename converted.jpg in the same directory, enter the following command:

$ convert -resize "600>" -border 1x1 -bordercolor "#000000" -quality 70 image.png converted.jpg

Batch processing images from the command line

As I stated at the start of this post, I often have a lot of images I need to edit. Using a command line tool like ImageMagick makes it easy to batch process all the images in a folder by entering a single command.

Use the mogrify command to process a batch of images. Instead of a filename, use a wildcard characters that will match the image files in the current folder. For example, *.* will match all files in a folder.

Command parameters can be combined in a single command. If you want to perform more than one transformation on an image — in this case we resize an image and then add a border — it is best to do everything with one command.

To change the size of all images in a folder that are wider than 600 pixels to 600 pixels wide, and to then add a black, 1-pixel wide border to each images and save it to a directory named Newimage, run the following command.

$ mogrify -path Newimage/ -resize "600>" -border 1x1 -bordercolor "#000000" *.*

Batch conversion: changing file types

The mogrify command shown above is the simplest way to batch process images from the command line using ImageMagick. But, the mogrify command will not convert image types or allow you to save to a different file name. if you wish to change the file type of a batch of images, you need to use the convert command, which lets you specify an output filename.

However, the convert command does not work well with wildcard file names so it more difficult to convert batches of files. We must write a short script to run the convert command in a loop that will convert each file in a directory.

To keep the script simple, we assume the following:

• All images are in the same folder
• The folder contains only image files, each identified by a filename extension such as .jpg, .png, or .gif

Below, I show how to batch convert all images in a directory using a short script in the command line interface in Windows, Linux, and Mac OS X.

Batch converting images in Linux and Mac OS X

In the Linux operating system and the Mac OS X operating system use the bash shell for the command-line interface. So we may use the same commands for either system.

To covert all images in a folder from one image type to another — for example, from PNG format to JPEG format — first open a terminal window, then navigate to the folder containing the images and enter the commands:

$ mkdir Newimage
$ for i in *.png; do convert "$i" "Newimage/${i%.*}.jpg"; done

This creates a new folder, Newimage in the image folder. Then the next command starts a for loop that reads each file with a .png extension, which is all files in the PNG image format, and saves each image as a new file in the JPEG image format, with the .jpg extension in the Newimage directory.

We used shell parameter expansion to create the output filename and extension in the script. We also used quotes around the variables so we can handle filenames that contain spaces.

Batch converting images in Windows

To covert all images in a folder from one image type to another — for example, from PNG format to JPEG format — in the Windows operating system, first open the Windows command-line interface. In Windows Explorer, hold down the Shift key and right-click the folder containing the images you wish to edit. Then click on Open command window here in the context menu that appears. The command prompt will appear with the path to your image folder already set.

In the command window, enter the commands:

> mkdir Newimage
> for %i in (*.png) do (convert "%i" "Newimage\%~ni.jpg")

This creates a new folder, Newimage in the image folder. Then the next command starts a for loop that reads each file with a .png extension, which is all files in the PNG image format, and saves each image as a new file in the JPEG image format, with the .jpg extension in the Newimage directory.

In the script, we used Windows command argument syntax to create the output filename in the script.

Combining parameters

Command parameters can be combined in a single convert command. If you want to perform more than one transformation on an image when it is converted, you can do everything in one command.

For example, change the size of all PNG images in a folder that are wider than 600 pixels to 600 pixels wide, and to then add a black, 1-pixel wide border to each image and save it as a JPEG image at 70% quality to a directory named Newimage. Run either of the commands:

In Linux or Mac OS X:

$ for i in *.png; do convert -resize "600>" -border 1x1 -bordercolor "#000000" -quality 70 "$i" "Newimage/${i%.*}.jpg"; done

In Windows:

> for %i in (*.png) do (convert resize "600>" -border 1x1 -bordercolor "#000000" -quality 70 "%i" "Newimage\%~ni.jpg")

Installing ImageMagick

The ImageMagick project provides installation instructions for all major operating systems. In the section below, I show the procedures I followed to install ImageMagick on Linux, Windows, and Mac OS X.

Installing ImageMagick in Linux

Installing ImageMagick in Linux is simple if you use the standard package manager for your Linux distribution. For example: in Debian or Ubuntu, install ImageMagick with the command:

$ sudo apt-get update
$ sudo apt-get install imagemagick

Installing ImageMagick in Windows

Installing ImageMagick in Windows is easy if we use the Windows installer program for ImageMagick.

Download the ImageMagick installer program from the ImageMagick downloads page. When I wrote this post, the most recent installer was ImageMagick-6.9.2-10-Q16-x64-dll.exe. Then double-click on the downloaded file in Windows Explorer to run it.

The installation wizard will open a dialogue window. Keep clicking on Next or Install until installation is completed.

Installing ImageMagick in Mac OS X

To install Linux programs on Mac OS, we must use a program that packages Linux programs for Mac OS X. The ImageMagick project recommends using MacPorts to install ImageMagick on Mac OS X. This section will show how to install MacPorts and then how to use MacPorts to install ImageMagick.

Install MacPorts

The Install MacPorts page on the MacPorts web site lists all the steps required to install and use MacPorts. As a summary, here are the steps I used to install MacPorts on my iMac.

1. Install Xcode from the Mac App Store. This will take a longtime so you may wish to start the installation process and then let it run overnight.
2. Run Xcode and follow the prompts to finish installation and configuration.
3. Install the Xcode Command Line Tools. Open a terminal window and enter the command: sudo xcode-select --install. A dialogue box will pop up, click on “Install”, then accept the license agreement, and wait until the software is installed.
4. Download the latest version of MacPorts from the MacPorts download page. I am running Mac OS X 10.11 (El Capitan) so I downloaded the package installer named MacPorts-2.3.4-10.11-ElCapitan.pkg.
5. Double-click the downloaded package installer. Click on “Continue” or “Install” in each dialogue box that pops up until the installation is complete.
6. Open a terminal window. Update the list of Mac ports with the command sudo port selfupdate.

Install Imagemagick

To install Imagemagick, use the MacPorts port command:

$ sudo port install ImageMagick

The port command downloads ImageMagick and its prerequiite libraries, then configures, builds, and installs ImageMagick. This will take a long time and, while it is working, it will output a lot of text to the terminal window.

Keeping ImageMagick Updated

To ensure you always have the latest version of ImageMagick, run the following commands occasionally:

$ sudo port selfupdate
$ sudo port upgrade outdated

This will update all programs installed using MacPorts.

Conclusion

I showed you how to use ImageMagick’s command line tools to quickly and easily modify batches of images to prepare them for publishing on your blog.