Optimize PNG, JPEG, GIF, SVG images with gulp task.
$ npm install --save-dev gulp-imageThis package includes multiple image-related libraries so that you might be required to install several external dependencies like libjpeg or libpng. Please install them as needed with Homebrew on macOS or apt (Advanced Package Tool) on Linux.
This is an example of gulpfile.js.
import gulp from 'gulp';
import image from 'gulp-image';
gulp.task('image', () => {
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 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'],
gifsicle: ['--optimize'],
svgo: {} // svgo accepts options defined on https://github.com/svg/svgo#configuration
}))
.pipe(gulp.dest('./dest'));
});
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent