How to set up Gulp to optimise PNG images using Zopfli

Jeff Atwood posted about using Zopfli to optimise PNG images. Here’s how to set up Gulp to do it. I’m assuming you already have a project with Gulp set up that uses gulp-imagemin.

  1. Install imagemin-zopfli by running the following on the command line in the project folder. 
    npm install imagemin-zopfli --save-dev
  2. In the project’s gulpfile.js, update the task that runs gulp-imagemin to use imagemin-zopfli by setting the use option. 
    var imagemin = require('gulp-imagemin');
var zopfli = require('imagemin-zopfli');

gulp.task('imagemin', function() {
    return gulp.src('./src/images/*')
        .pipe(imagemin({
            use: [zopfli()]
        }))
        .pipe(gulp.dest('./build/images/'));
});

I did a quick comparison between the default imagemin PNG optimiser and Zopfli. Zopfli compressed my sample PNG better (59.8% vs 53.8%), but took longer to do it (866ms vs 101ms).

terminal screenshot