Image Optimising with Gulp

5 minute read

We care about web performance but we always often forget to minimize our image assets. We can save upto 40% or more on those assets. This can be automated with certain apps or automated through a JS Task managers like Gulp.js or Grunt.js

For this blogpost I use Gulp

Pick the best plugin

I found two candidates. If I missed any, please place a comment below.

My testcase setup was as follows:

  • a folder with the original images ( 1 .jpg and 1 .png)
  • separate destination folders for the optimised images

Our test images … both resized and optimised for this blog post …

The JPG, 1928x1928 ~ 1.5 MB
The PNG, 1082x610 ~ 85 KB

My gulpfile.js config

var gulp = require('gulp');
var imagemin = require('gulp-imagemin'),
    smushit = require('gulp-smushit');

gulp.task('imagemin', function () {
    return gulp.src('img/*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('imagemin-img'));
});

gulp.task('smushit', function () {
    return gulp.src('img/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('smushit-img'));
});

gulp-imagemin

Minify PNG, JPEG, GIF and SVG images

Pro:

  • a lot of configurable options
  • you can include other optimizing plugins, like pngquant (see code example below)
  • can handle all image formats

Cons:

  • no verbose option for the output

gulpfile.js with pngquant

var gulp = require('gulp');
var imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function () {
    return gulp.src('img/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('imagemin-img'));
});

With pngquant enabled we save extra bytes on PNG files: 203.79 kB vs. 164.67 kB (12.9% vs 10.4%) and you don’t notice any quality loss in the asset.

# with pngquant
➜  optim  gulp imagemin
[10:07:37] Using gulpfile /Applications/MAMP/htdocs/POC/optim/gulpfile.js
[10:07:37] Starting 'imagemin'...
[10:07:38] gulp-imagemin: Minified 2 images (saved 203.79 kB - 12.9%)
[10:07:38] Finished 'imagemin' after 1.07 s

# without pngquant
➜  optim  gulp imagemin
[11:10:05] Using gulpfile /Applications/MAMP/htdocs/POC/optim/gulpfile.js
[11:10:05] Starting 'imagemin'...
[11:10:06] gulp-imagemin: Minified 2 images (saved 164.67 kB - 10.4%)
[11:10:06] Finished 'imagemin' after 835 ms

gulp-smushit

Plugin to optimize PNG and JPG using Yahoo Smushit. Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.

Pro:

  • Easy to configure
  • Plug ‘n’ play

Cons:

  • Only for jpg and png
var gulp = require('gulp');
var smushit = require('gulp-smushit');

gulp.task('smushit', function () {
    return gulp.src('img/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('smushit-img'));
});

Verbose output in the terminal

➜  optim  gulp smushit
[10:37:47] Using gulpfile /Applications/MAMP/htdocs/POC/optim/gulpfile.js
[10:37:47] Starting 'smushit'...
[10:37:51] /Applications/MAMP/htdocs/POC/optim/img/salomon.jpg
[10:37:51] gulp-smushit: Compress rate % 8.60
[10:37:51] gulp-smushit: 1491876 bytes  to   1363503 bytes
[10:37:54] /Applications/MAMP/htdocs/POC/optim/img/shark9.png
[10:37:54] gulp-smushit: Compress rate % 19.56
[10:37:54] gulp-smushit: 84576 bytes  to   68034 bytes
[10:37:54] Finished 'smushit' after 7.16 s

Comparison

They both compress almost equally (see below) with imagemin coming in first place.

jpg compressed with imagemin
jpg compressed with smushit
png compressed with imagemin
png compressed with imagemin and pngquant
png compressed with smushit

Crunching the numbers …

original Imagemin Smushit
JPG 1.491.876 bytes (1.5MB) 1.344.231 bytes (1.3MB) 1.363.503 bytes (1.4MB)
PNG 84.576 bytes (85KB) 67.550 bytes (68kb)
28.428 bytes (28KB) with pngquant		 68.034 bytes (68KB)
Time 835ms or 1.07s 7.16s

And we have a winner: gulp-imagemin !!!!

  • more options and extendable
  • more image formats supported
  • better compression
  • faster

Credits

I originally wrote this Proof of Concept for the in-house teams of De Persgroep Publishing on the company’s intranet. Kudos to them for allowing me to share this blog post with the community.