Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-image with all npm packages installed. Try it out:

var gulpImage = require("gulp-image")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-image v6.1.0

Optimize PNG, JPG, GIF, SVG images with gulp task.

gulp-image

Optimize PNG, JPEG, GIF, SVG images with gulp task.

Build Status NPM version Dependency Status devDependency Status

gulp-image result

Install

$ npm install --save-dev gulp-image

External Dendencies

  • brew install libjpeg libpng on macOS
  • apt-get install -y libjpeg libpng on Ubuntu
  • npm install -g windows-build-tools on Windows

Usage

This is an example of gulpfile.js.

const gulp = require('gulp');
const image = require('gulp-image');

gulp.task('image', function () {
  gulp.src('./fixtures/*')
    .pipe(image())
    .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['image']);

You can pass an object to image() as argument such as following:

gulp.task('image', () => {
  gulp.src('./fixtures/*')
    .pipe(image({
      pngquant: true,
      optipng: false,
      zopflipng: true,
      jpegRecompress: false,
      mozjpeg: true,
      guetzli: false,
      gifsicle: true,
      svgo: true,
      concurrent: 10,
      quiet: true // defaults to false
    }))
    .pipe(gulp.dest('./dest'));
});

Set false for optimizers which you don't want to apply. And you can set concurrent option to limit the max concurrency in execution. You can also set quiet to avoid logging out results for every image processed.

You can configure parameters applied to each optimizers such as following:

gulp.task('image', () => {
  gulp.src('./fixtures/*')
    .pipe(image({
      optipng: ['-i 1', '-strip all', '-fix', '-o7', '-force'],
      pngquant: ['--speed=1', '--force', 256],
      zopflipng: ['-y', '--lossy_8bit', '--lossy_transparent'],
      jpegRecompress: ['--strip', '--quality', 'medium', '--min', 40, '--max', 80],
      mozjpeg: ['-optimize', '-progressive'],
      guetzli: ['--quality', 85],
      gifsicle: ['--optimize'],
      svgo: ['--enable', 'cleanupIDs', '--disable', 'convertColors']
    }))
    .pipe(gulp.dest('./dest'));
});

License

MIT © Shogo Sensui

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free