In this chapter, we will learn how to process images from the command line. We will start with the most complex and widely used image command line interface processing toolkit called ImageMagick. To install it, run the following:
sudo apt install imagemagick
As you can see, we have already installed it.
Now, let's find some images to process. Let's use the default Ubuntu backgrounds that can be found in /usr/share/backgrounds. Let's copy the backgrounds to another location so that we don't alter our default ones.
We'll take a look at the first image in our list: we can see from ls that it is a JPEG image of 1.6 MB. To open it and see how it looks, let's use the eog (eye of gnome) image viewer:
The first and most important part of knowing how to process an image is knowing what that image actually is. To find this out, ImageMagick comes with a tool called identify. In its simplest form, you have to feed it an image name and it will output information like the following:
identify image_name 160218-deux-two_by_Pierre_Cante.jpg JPEG 3840x2400 3840x2400+0+0 8-bit sRGB 1.596MB 0.240u 0:00.230
We can see that the file is a JPEG image of 1.6 MB and most importantly, its size is 3,840x2,400 pixels.
If we look at the warty-final-ubuntu.png we see that the output format is similar: the size and resolution are higher and the image format is PNG. Let's see what it looks like:
eog warty-final-ubuntu.png
PNG images usually take more space than JPEG images. If you don't have transparency, it is recommended to use .jpg. In order to convert from one type to the other, we use the imagemagick convert command with two parameters: input filename and output filename:
convert file.png file.jpg
The format of the output image will be deduced by convert from the filename extension. As you can see, the output is a JPEG image with the same resolution, but with a much smaller size than the PNG version: 180 KB compared to 2.6 MB. If we open the image, we can't see any noticeable differences. This is a big thing when it comes to web development, because if we were to use this picture on a web page, it would load as much as 15 times faster than the PNG version.
If we want to crop a region of the image, we can do that with convert. For example, if we want to cut a 500x500 piece of the image, starting at coordinates 100,100, we would use the following:
convert -crop "500x500+100+100" warty-final-ubuntu.png warty.jpg
As we can see, the output image is at the resolution we requested, but it has a much lower size of only 2.5 KB. Visually analyzing the two images we can see that the cropped one is a section of the big picture. Normally you wouldn't want to guess pixels in the command line, but would use an image processing software, such as GIMP, to do the work for you, so that you can visually select and crop portions of the images. However, when developing software applications, it is often the case that you have to programmatically crop images, in which case this comes in handy.
The convert command is also good at creating images. If we want to create an image from a text string, we could use the following:
convert -size x80 label:123 nr.jpg
This will create a JPEG image with a height of 80 pixels, containing the text specified, in this case the string 123. We can see the output, it is a 3.4 KB image and, if we look at it visually, we see the text 123:
This can also come in handy in different scenarios where you need to programmatically generate readable images, such as using CAPTCHA software or generating default profile images with the user's initials.
Now let's look at some image shrinking tools outside of imagemagick. The first one is a png shrinking tool called pngquant. We will install it by typing the following:
sudo apt install pngquant
Let's try to shrink the large PNG image that we were looking at earlier. If the image contains transparency and it is necessary to keep it in the PNG format, we would just call pngquant with the following image name:
pngquant warty-final-ubuntu.png
By default, it outputs a file with the same name and an added fs8 extension. We can see that the difference in size is also noticeable (it's smaller by 1 MB, which is almost half the original size). If we visually compare the images, we won't be able to spot any differences:
Alright, now let's try and do the same thing for JPEG images.
For this, we'll install the equivalent of pngquant, which is jpegoptim:
sudo apt install jpegoptim
We will call it the same way and we're just going to give it a command-line argument, which is the file to shrink. Let's pick some random images to try and see if we can reduce their size:
As you can see from the output, it is saying Skipped. That means the image had already been shrunk (the guys at Ubuntu probably used the same tool before submitting the image). If we try it again on the JPEG produced by imagemagick, you can see that it is also skipped: imagemagick already uses the minimum necessary format.
The image processing tools come in especially handy when it comes to web development, where lots of images need to be used and their size needs to be as small as possible. Command-line tools are really useful because they can be used to automate tasks. Image shrinking is usually added to build tasks, where production versions of websites are prepared. The imagemagick toolkit comes with a lot more tools than the ones we have seen today, so feel free to explore other handy commands from the toolkit. Also, when it comes to graphically processing the images, there are some great open source tools like GIMP and Inkscape that can really help you get your job done, and also save you a lot of money.