Optimise Images for the Web

If you’re using images in a website, it’s very important that they are properly re-sized and compressed. If you have megabytes of over-large images, you could potentially slow down page loading time.

This will upset your users and may even cause you to be penalised by Google – resulting in reduced traffic. In the days of the mobile internet, proper image size is increasingly important. Just imagine the user trying to access your site over a crappy 3g connection.

This is a simple way to batch resize images on a linux system (in my case, Ubuntu).

Imagemagick

Imagemagick is an open-source image processing software suite for Linux, Unix, MacOS and Windows. It works really well from the command line. Once installed, it will allow you to resize and compress images.

Step 1: Install Imagemagick

In Ubuntu (and other Debian based Linux distributions):

sudo apt-get install imagemagick

You may need to update after installing:

sudo apt-get update

Clone Your Image Directory

Navigate to the image directory that you want to process:

cd ~/images

Make a new directory for the compressed images, and give it a meaningful name – in this case, “compressed”:

mkdir compressed

Copy the contents of the orginal image folder into the new sub directory:

cp /images/* /images/compressed/

Change to the new directory:

cd compressed

Resize Images

Now the fun starts! To begin with, resize all images to 640px width (assuming that they’re all bigger than this):

mogrify -resize 640 *.jpg

Obviously you could repeat the process if you’d like the images to be available at a range of dimensions. I chose 640px since it was the largest image dimension for the site in question.

This should succesfully re-size all images – resulting in a decent saving in terms of image filesize. But imagemagick can do better.

Images for the web don’t need the quality of print images – so we can safely reduce image quality.

mogrify -quality "70%" *.jpg

Batch Compress WordPress Images

If you have command line access to a WordPress installation, navigate to your uploads folder and batch compress images. Move to the uploads directory:

cd /var/www/testsite.com/public_html/wp-content/uploads

Compress images in the 2013 directory:

mogrify -quality "70%" 2013/*/*.jpg

This will compress images with a .jpg suffix in all subdirectories of uploads/2013. Repeat for other years as necessary. You may need to give yourself ownership of the directory first:

sudo chown -R USERNAME /var/www/testsite.com

It might be a good idea to check ownership of the directory first, and return ownership to the original user when you’ve finished.

The image below was compressed from a massive 10.1MB to a lean 43.9 kB – a greater than 99% saving in filesize, with a correspondingly quicker load time. That’s what I call an improvement in performance!

Sheep

Related Content