Gulp Optimizing Images

In this tutorial we will learn, how to optimize images using gulp. In order to optimize images we are using imagemin plugin of gulp

Installing Gulp Plugin :

Using below command, we can install imagemin plugin.

npm install --save-dev gulp-imagemin

After installing above plugin we need to add dependencies and create task for optimizing images -

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('default', function() {
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});

Now run below gulp task to optimize images -

gulp

It will produce below output -

F:\wamp\www\gulp>gulp
[08:57:29] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[08:57:29] Starting 'default'...
[08:57:31] gulp-imagemin: Minified 21 images (saved 119.58 kB - 4%)
[08:57:31] Finished 'default' after 2.15 s

Optimize Images Recursively :

If you want to optimize images from all the folders and recursive folders then you can update your gulp task with below code -

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('default', function() {
    gulp.src('src/images/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});

Optimize Specific Types of images :

If you want to optimize only jpg or gif images only then you can modify gulp task like -

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('default', function() {
    var imgDir = 'src/images/*.+(jpg|gif)';
    gulp.src(imgDir)
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});

After executing gulp command, you will get below output -

F:\wamp\www\gulp>gulp
[09:12:20] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[09:12:20] Starting 'default'...
[09:12:20] Finished 'default' after 58 ms
[09:12:21] gulp-imagemin: Minified 6 images (saved 71.03 kB - 5.7%)

Optimize Images Only once :

Over the period of development, we have multiple images stored in source folder. When we run task for optimizing images, then by default gulp will scan and optimize all images.

If you want to optimize images only once then you need to modify task like -

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var isChanged = require('gulp-changed');
gulp.task('default', function() {
    var imgDir = 'src/images/*.+(jpg|gif)';
    gulp.src(imgDir)
        .pipe(isChanged('dist/images'))
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});

After executing gulp command, you will get below output -

F:\wamp\www\gulp>gulp
[09:12:20] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[09:12:20] Starting 'default'...
[09:12:20] Finished 'default' after 58 ms
[09:12:21] gulp-imagemin: Minified 6 images (saved 71.03 kB - 5.7%)
F:\wamp\www\gulp>gulp
[09:12:36] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[09:12:36] Starting 'default'...
[09:12:36] Finished 'default' after 49 ms
[09:12:36] gulp-imagemin: Minified 0 images

In the second execution, no image will be optimized