Resizing images is one of the many different ways that you can optimize your images or photos for web usage. One of the most important factors affecting the SEO of the webpage is the page load time. If your web page contains one or more images, then optimizing these images will make the total size of the webpage smaller and thus will improve the page load times.
The re-sizing of the images makes the images appropriately sized to the size at which it is displayed thus removing the need for the browser to re-size them to fit your layout. This not only reduces the download times but as well as the processing required to display the page.
The re-sizing is usually done by the web designer for a website. If you are using the image in a blog post, then as the author of the content it is usually the responsibility of the author to provide the relevant images that are optimized for web use. Either way it is best to know how to resize images to create an optimized web page.
If you are dealing with a single image or photo then you should be able to re-size them using any photo editing software. You will find that many of these are free and open source, such as Gimp. You can also use the command line utility convert if you have only a single or small number of images to deal with.
Sometimes, you might be dealing with more than one or two images. In this case, it might be pretty cumbersome to edit each file individually to perform the same operation on all of them. There are some Linux utilities that will allow you to edit and resize several images in batch. The most popular and easiest is mogrify, which comes from the imagemagick library.
The mogrify command from the imagemagick library is especially designed with batch processing in mind. It does exactly the same processing as the convert command which is much more popular. It supports almost all image processing tasks such as format conversions, blur, crop, resize, flip, join etc. One of the options is to resize the images, which we will see in the examples below.
We will assume that the image files that we want to convert all starts with the name img and have a file extension of jpg. The command line option that you need to use is -resize which takes a plethora of options to resize.
Resize image by a factor
bash$ mogrify -resize 25% img*.jpg
This will resize all image files that start with the word img by 25 percent. You can use any file filter regular expression to match your files.
Resize image by exact width
bash$ mogrify -resize 200 img*.jpg
This command will resize the images to the exact width of 200 pixels. The height of the image will be computed by keeping the aspect ratio the same.
Resize image by exact height
bash$ mogrify -resize x350 img*.jpg
This command works exactly as the previous one but will resize the images to the exact height of 350 pixels. The width of the resulting image is calculated by preserving the aspect ratio of each image.
Resize image by exact width and height
bash$ mogrify -resize 300x300 img*.jpg
This will resize the images such that the specified width and height are the maximum value. Depending on the original image dimensions, either the width or the height, whichever is smaller is calculated to preserve the aspect ratio. You can also specify the minimum size of the image by using the ^ after the size.
bash$ mogrify -resize 300x300^ img*.jpg
If you like the image to be resized exactly to the size that is specified by ignoring the original aspect ratio of the image, then you can do that with the ! operator.
bash$ mogrify -resize 300x300! img*.jpg
The above command will resize the images to exactly 300 pixels in width and height irrespective of the original size and aspect ratio.
One of the prime concerns while resizing is the aspect ratio of the image. The aspect ratio is mostly preserved unless you explicitly specify otherwise.
Another issue with resizing in batch is when all the original images are not of the same size to start with. You would only want to downsize an image if it is only large than the specified size and vice versa. You can accomplish that with the ‘>‘ and ‘<‘ flags.
bash$ mogrify -resize 250x250> img*.jpg
This will shrink the images that are larger than 250 pixels in either the width or the height to 250 pixels while maintaining the aspect ratio. You can also enlarge the images, if they are smaller than 250 pixels by using the command below
bash$ mogrify -resize 250x250< img*.jpg
One of the advantages of using mogrify over convert is that it overwrites the original file while processing the image. This has the advantage that you will not end up with a lot of images, the original and processed. This can be useful when you do not have a lot of disk space to work with and you need to process a large number of files.
But this can also be dangerous as if you do something wrong like specifying the wrong size or mistyping the wrong options. There is really no way to get the original image unless you have a backup.
Using Gimp (batch mode)
Gimp is a free open source photo editing software that gives you the ability to resize images. Although the batch processing functionality is not built into Gimp, there are a couple of plugins available that allows you to resize multiple images in batch.
There are a couple of popular plugins for batch processing namely, BIMP (Batch Image Manipulation Plugin) and DBP (David’s Batch Processor) that works pretty well. I personally prefer the command line tool mogrify over the Gimp batch mode plugins.
You can also try the batch mode that is built into Gimp. It can be a bit more complicated than mogrify and the plugins, but is a good option in case you cannot use either of the above options for any reason.