Optimising images the easy way

One of the largest assets on any website these days are the images, especially with the current trend for big hero images and image sliders on front pages. This means that they are a prime target for attention when working on a development process.

There are many things that you can do to compress images, and different image types can be handled in different ways.  However, the quickest win is to start by using a default set of loseless compressions. The advantage of sticking with loseless is that you don’t have to worry about reducing the quality of the images – they won’t be reduced in filesize as much as they potentially could be, but it’s the safer option for getting started.

As is usually the way with Gulp, there’s a plugin for that! In this case, it’s the gulp-imagemin plugin. This is a thin wrapper for the imagemin plugin, which claims to…

minify images seamlessly

And yes, this is exactly what it does. Although it is really just a control module by itself, you have to install additional plugins in order to handle different file types.

Handily, the gulp-imagemin plugin bundles in a few popular plugins…

For me, I don’t need .svg particularly, but the other file types are all useful, and as a default set, I think this would cover the bases for most people.

To include this in your project, you can require it at the top of your Gulp file…

var imagemin = require("gulp-imagemin");

You can then create a new task specifically to handle images…

gulp.task("img",function(cb) {
  pump([
    gulp.src(["img/*.png","img/*.jpg"]),
    imagemin(),
    gulp.dest("build/img")
  ],cb);
});

This takes in all of the .png and .jpg files in my “img” folder, optimises them and then stores the optimised files in the “build/img” folder.  I’ve found it’s best not to pass any other files into this plugin, so it’s safer to use the extensions that than point to the whole folder.

Don’t forget to add this new task as a pre-requisite for the “default” Gulp task…

gulp.task("default",["js","css","img"]);

One thing that you’ll notice if you do this however, is that it will process all images every time, which isn’t very efficient if you’ve got a lot of images and they don’t change very often!

The best way to solve this is with the gulp-newer plugin.  This will also need to be required at the top of the Gulp file…

var newer = require("gulp-newer");

It is then added into the “css” task we created above…

gulp.task("img",function(cb) {
  pump([
    gulp.src(["img/*.png","img/*.jpg"]),
    newer("build/img"),
    imagemin(),
    gulp.dest("build/img")
  ],cb);
});

This plugin will compare the files in the source (“src”) array and compare them against files of the same name in the specified folder, which in this case is the same as the destination (“dest”) folder.  It will only pass through files that are newer, meaning ones that have a modification date more recent than in the destination folder, or files that don’t exist in the destination folder.  This works perfectly with our image task, because it means that only new or modified images will be processed.

If you want to learn more about this, it’s covered in my Skillshare course, Optimising your website: A development workflow with Git and Gulp. The relevant video is 19 – Optimising Images.