Optimize PNG, JPEG, GIF, SVG images with gulp task.
Optimize PNG, JPEG, GIF, SVG images with gulp task.
$ npm install --save-dev gulp-image
brew install libjpeg libpngon macOS
apt-get install -y libjpeg libpngon Ubuntu
npm install -g windows-build-toolson Windows
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, gifsicle: true, svgo: true, concurrent: 10, quiet: true // defaults to false })) .pipe(gulp.dest('./dest')); });
Set
falsefor optimizers which you don't want to apply. And you can set
concurrentoption to limit the max concurrency in execution. You can also set
quietto 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'], gifsicle: ['--optimize'], svgo: ['--enable', 'cleanupIDs', '--disable', 'convertColors'] })) .pipe(gulp.dest('./dest')); });