@yohacoo/gulp-image-compress

Gulp plugin to compress images. This version compress jpeg, png, webp and svg images. Other files skip compression.

Install

npm install --save-dev @yohacoo/gulp-image-compress

Usage

import gulp from 'gulp';
import imageCompress from '@yohacoo/gulp-image-compress';

function compressImages(cb) {
  gulp
    .src('src/images/**/*', { encoding: false })
    .pipe(imageCompress())
    .pipe(gulp.dest('dist/images'));
  cb();
}

export default compressImages;

Make sure to add { encoding: false } to gulp.src from Gulp 5. Otherwise, you'll get an unsupported image format error.

With options

import gulp from 'gulp';
import imageCompress from '@yohacoo/gulp-image-compress';

function compressImages(cb) {
  gulp
    .src('src/images/**/*', { encoding: false })
    .pipe(
      imageCompress({
        jpeg: { quality: 85, progressive: true },
        png: { quality: 85, progressive: true },
        webp: { quality: 85, alphaQuality: 85 },
        svg: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  cleanupIds: false,
                },
              },
            },
            'removeDimensions',
          ],
        },
        allowLargerOutput: true,
        verbose: true,
      })
    )
    .pipe(gulp.dest('dist/images'));
  cb();
}

export default compressImages;

This plugin compressed with sharp and optimize with svgo. jpeg, png, webp options are passed to sharp as is. Similarly, svg option is passed to svgo. In this example, svgo's preset-default is customized: cleanupIds plugin is disabled, and removeDimensions plugins is enabled.

If you set verbose to true, you can see the compression results for each file.

Note

If the compression output by sharp is larger than the input, this plugin returns the original input data by default. You can change this behavior by setting options.allowLargerOutput to true.

API

imageCompress(options?)

options

| Param | Type | Default | Description | | --- | --- | --- | --- | | [options] | object | | compression options | | [options.jpeg] | object | { quality: 80 } | jpeg options for sharp | | [options.png] | object | { quality: 80 } | png options for sharp | | [options.webp] | object | { quality: 80 } | webp options for sharp | | [options.svg] | object | { plugins: [ { name: 'preset-default' } ] } | svg options for svgo, default to preset-default | | [options.allowLargerOutput] | boolean | false | allow larger output than input | [options.verbose] | boolean | false | log info on every image |