Image lossless compression (with gulp-imagemin)

Other topics

Remarks:

First argument to imagemin constructor is plugin array. By default, following plugins are used: [imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo()]

Second argument are options. In the above example following options are used:

{
  progressive: true,
  interlaced: true,
  svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
}

Those are completely optional.

progressive is used by imagemin-jpegtran.

interlaced is used by imagemin-gifsicle.

removeUnknownsAndDefaults and cleanupIDs are used by imagemin-svgo.

Installation and usage

Dependency installation ( https://www.npmjs.com/package/gulp-imagemin )

$ npm install --save-dev gulp-imagemin

Usage

/*
 * Your other dependencies.
 */

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

/*
 * `gulp images` - Run lossless compression on all the images.
 */
gulp.task('images', function() {
  return gulp.src(sourcePath) // e.g. /assets/images
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
    }))
    .pipe(gulp.dest(buildPath + 'images')); // e.g. /static/dist/
});

Syntax:

  1. imagemin([plugins], {options})

Parameters:

ArgumentDescription
sourcePathImages' source directory (for example: /assets/images)
buildPathDestination path (for example: /static/dist/)

Contributors

Topic Id: 6549

Example Ids: 22413

This site is not affiliated with any of the contributors.