Load website images faster with gulp plugins

One key thing about optimizing website performance is image handling. Website should download minimal size of image files and minimize number of images. Here are few tools we use together in our build automation process. We use Gulp as the build script, btw.

1. Sprity for CSS Sprite

CSS Sprite is a technique to combine multiple images into single file in order to minimize the number of requests triggered when the webpage being loaded.

Sprity takes several images, combine them into one and generate the corresponding css file:

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprity = require('sprity');

// generate sprite.png and _sprite.scss
gulp.task('sprites', function () {
  return sprity.src({
    src: './src/images/**/*.{png,jpg}',
    style: './sprite.css',
    // ... other optional options
    // for example if you want to generate scss instead of css
    processor: 'sass', // make sure you have installed sprity-sass
  })
  .pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/css/')))
});

2. ImageOptim to downsize your images

ImageOptim tries to compact your images to smaller size without lossing image quality.

So the general process is: make sure the image resolution / dimension is optimized. And before you upload your images, you should always run the ImageOptim to further decrease the file size.

With gulp-imageoptim, you can automate the imageoptim processing into the build process:

var gulp = require('gulp');
var imageOptim = require('gulp-imageoptim');

gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(imageOptim.optimize())
    .pipe(gulp.dest('build/images'));
});

Eddie Lau

F5 Works