Command-line Basics: Resizing Images with ImageMagick

joshtronic

If you’ve ever done programmatic image manipulation (especially in PHP) you have probably encountered the ImageMagick library or it’s major fork, GraphicsMagick. In addition to being able to leverage it’s power from many popular programming languages, you can also use it directly from the command-line thanks to the library’s supplied executables like mogrify and convert.

Getting started

The ImageMagick library is quite popular, but doesn’t usually come installed by default. Thanks to it’s popularity though, you should be able to install it from your favorite package manager (like apt or brew).

If you’re looking for more information on installation, you can checkout the Install-*.txt files available in the ImageMagick code repository.

I’m going to assume you already have an image handy (JPG, PNG, etc.) to work with. If not, you should head over to Purple11 and snag an image or two from there. Check out some of the tools and guides while you’re at it!

Resize to specific dimensions, ignoring the aspect ratio

Resizing to specific dimensions without preserving the aspect ratio tends to not be a desired thing to do. Images end up looking distorted, unless the original aspect ratio was already pretty close to 1:1.

That said, it’s still good to know how to resize this way, if nothing else, so we know what to avoid when punching in commands late at night.

To resize an image to specific dimensions, without maintaining the original image’s aspect ratio, include a bang ! at the end of the dimensions:

$ convert original.png -resize 100x100! new.png

Resize to specific dimensions and keep aspect ratio

To keep the aspect ratio, simply omit the bang:

$ convert original.png -resize 100x100 new.png

This won’t actually resize the image to the exact dimensions specified. What it will do is resize the image to fit within those dimensions.

The flip side, is that you can append ^ to the dimensions to tell ImageMagick that you’d like to resize the image to fill the dimensions, potentially overlapping on one side.

One of the two dimensions (either width or height) will be scaled exactly, while the other will be scaled proportionately and may overlap:

$ convert original.png -resize 100x100^ new.png

Resize to specific dimensions and keep the aspect ratio

Sometimes you want to not only resize the image and fill the area, as well as keep it’s aspect ratio, but also crop it so there’s nothing overlapping. A good use case for this is user avatars. Obviously you don’t want to stretch or squash a user’s profile picture, so cropping it to a square is an okay solution:

$ convert original.png -resize 100x100^ -gravity center -extent 100x100 new.png

I say it’s only “okay” because users have grown more accustomed to being able to select the region of their uploaded image to serve as their avatar, so assuming they want the crop to the center of the image could cause a bit of a stir.

Also, depending on your needs, you can adjust the gravity to grab align differently, or even crop a size that doesn’t marry up exactly with the scaled dimensions.

Resizing files in place

Thus far, we’ve been converting a file and saving it to a brand new file. While being a safer option, as it’s non-destructive to your original file, it’s not always a desired work flow.

For the times you want to edit the file in place, you can swap the convert command with mogrify. The mogrify command accepts an input file that will be modified in place.

You are highly encouraged to make back ups of any images you are resizing in case you aren't happy with the results of the resize.

Here’s the “mogrifyed” versions of the previous commands:

$ mogrify -resize 100x100 original.png

Resizing multiple files

To take things a step further, if you wanted to be edit an entire directory of images and resize them all in the same way, you can pass mogrify a wild card string:

$ mogrify -resize 100x100! ./some/path/*.png
$ mogrify -resize 100x100^ -gravity center -extent 100x100 *.png

Conclusion

Resizing images from the command-line is really just the tip of the iceberg. ImageMagick supports a ton of additional options that allow you to optimize images, play with the colors and even pixelate things.

You can even combine the power of command-line image editing and git to automatically scale and optimize your images as part of your pre-commit hook.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#