Skip to main content

Optimizing Images with Gulp


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 }))

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