Skip to main content

Optimizing Images with Gulp

imagemin

Enhancing pictures helps us keep our locales as rapid as could be expected under the circumstances. Via robotizing the enhancement we can simply drop a picture into our project and our task runner will guarantee it is as little as conceivable without loss of quality.

We'll start with Gulp.

First step, you need to install "imagemin" plugin for Gulp

 

npm install gulp-imagemin --save-dev

 

After put this code to your gulpfile.js  

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

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

Let’s review how this works.

We are calling the task optiimage and then passing in a source location of all files in images folder.

 

Now, run this script:

gulp optiimage

You should see output similar to this:

Using gulpfile gulpfile.js
Starting 'optiimage'...
gulp-imagemin: Minified 1 image (saved 15.33 kB - 9.4%)
Finished 'optiimage' after 102 ms

 

 

Share