Save time by transforming images in the command line

Martin Malinda
HackerNoon.com
6 min readFeb 25, 2017

--

After a few months of mostly programming I took a step back this month to do regular HTML/CSS coding. At first it was really enjoyable but soon a first problem has arisen: exported images do not often come in the right form. Sometimes it’s PNG while it should have been JPG, sometimes the image has unnecessary whitespace or it has a wrong color. One solution is to start an image GUI editor of choice, change the image and save it. But this has a few downsides. Obviously you have to spend some time clicking around. Maybe with some practice you learn some key combos to do things faster. But still the simple process of opening the image and saving it is something that just takes too much time. And doing changes to multiple images at once is problematic. Chances are, that if you can explain the task in a few words, it is also simple to do in the command line.

The two most fundamental commands

There are a couple command line commands that can help you do most of the basic operations. These are of course for BASH, not Windows CLI. (That generally means you need a MacOS, Linux or Ubuntu on Windows). The library that enables the image processing is mostly ImageMagick. You most likely already have it installed, but on some Linux distributions you might need to install it yourself:

Sometimes it also needs to be installed on MacOS. That can easily be done with Brew:

ImageMagick provides you with two powerful commands: convert and mogrify. Mogrify generally takes the same arguments as convert, but allows you to process multiple images and replace them in place. Therefore it is good habit to backup those images beforehand. This will, for example, resize all images in current folder to 256 * 256.

With convert you can specify a single source and output filename. This will convert the image from PNG to JPG.

Mogrify equivalent for that would be:

Resizing and aspect ratio

For a lot of people, resizing is by far the most common image transformation.

Both convert and mogrify have the -resize (-r) argument available. It can take values in several formats:

An alternative solution for resizing can be the sips command which is only available on MacOS. Same as mogrify, it replaces images in place.

Sips also can do also rotates and flips but generally it is less flexible than ImageMagick. It’s main advantage is that it is installed on MacOS by default.

Cropping with the help of gravity

crop with mogrify and convert is very similar to resize. Default usage may not be totally intuitive though.

If the source image is 1000x1000, it will not output one image, but ten of them. This can be useful, but in real world scenario, what you often need is just one image cropped from the center. That’s where -gravity comes into play:

The +0+0 means y=0, x=0 so that we will get a closest tile from the center (actual center of the image).

If you just need to strip some border from the image, it is more useful to use -shave.

Trimming whitespace

When coding, image with whitespace is hardly ever useful. Such images are harder to position and make responsive. Yet when working with GUI editor, it is very easy to save the image with extra unnoticed whitespace.

Removing whitespace is as easy as

Trim is quite safe to use, but it’s a good practice to do a backup before. Some images may not be properly cropped because there can be tiny amount “pixel residue”. It is possible to add -fuzz to make the trim more strict.

Replacing colors and transparency

Do you need the logo in different color? Or do you need a transparent background? Both of these changes are very easy to do:

-fuzz can be added here to add tolerance in color replacement

If you have a jpg with white background and need to make it transparent, you can simply do:

Creating favicons

If the source image is at least 256x256, you can quickly convert into an ico that includes all the necessary standard image versions:

Getting more done with custom shell scripts

Preparing some shell scripts to automatise common image transformation can be helpful. Those can be more advanced operations or sequence of operations done on multiple images.

What I mean with shell scripts are mostly functions, that are placed in ~/.bashrc file (or ~/.bash_profile on Mac) so they are always available.

I use them often when working with collection of images, mostly galleries. When creating a gallery, when I receive a collection of images I most of the time do

This will rename the images to sequential numbers. That makes it easy to work with them in various templating languages and scripts. Next step is to create multiple image sizes for thumbnail and srcset purposes.

This will create a thumbnail folder, copies the images to it and resizes them to 150px width.

Now we can create a script that will take a collection of images and creates multiple size versions of them:

This will create folders big, full, medium and small and adds images of size 1620px, 1920px, 1024px and 450px width in them.

Compression

Imagemagick also offers several ways to optimize images for lower size. You can use option -quality (with range 0 to 100). And you can also apply many filters via -filter option. You can opt-in for progressive JPEG rendering, extra sharpening and other features.

Advanced techniques for compression are well described in this excellent smashing magazine article, especially the smartresize function can be very handy.

On MacOS it is also possible to ImageOptim-CLI which can provide up to 80% size decreases.

Conclusion

So far these commands served me well and I did not need to open a GUI. And as always, by using CLI you are not only saving time but you are also learning methods that you can later use for automatisation in custom build scripts and integrations. The learning curve is worth it.

— — — — —

I am a Freelancer Developer currently looking for work for upcoming months. I specialise in building single page applications with Ember.js and performance optimisations. Feel free to contact me at malindacz@gmail.com or twitter.com/@martinmalinda.cz

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

--

--

HackerNoon.com
HackerNoon.com

Published in HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Martin Malinda
Martin Malinda

Written by Martin Malinda

Creative through code. Inspired by nature. Currently building https://powersave.pro