-
-
Save LoyEgor/e9dba0725b3ddbb8d1a68c91ca5452b5 to your computer and use it in GitHub Desktop.
// install | |
// npm i gulp-cache gulp-imagemin imagemin-pngquant imagemin-zopfli imagemin-mozjpeg imagemin-giflossy -f | |
// node node_modules/jpegtran-bin/lib/install.js | |
// node node_modules/gifsicle/lib/install.js | |
// node node_modules/zopflipng-bin/lib/install.js | |
// node node_modules/mozjpeg/lib/install.js | |
// node node_modules/giflossy/lib/install.js | |
// node node_modules/pngquant-bin/lib/install.js | |
var cache = require('gulp-cache'); | |
var imagemin = require('gulp-imagemin'); | |
var imageminPngquant = require('imagemin-pngquant'); | |
var imageminZopfli = require('imagemin-zopfli'); | |
var imageminMozjpeg = require('imagemin-mozjpeg'); //need to run 'brew install libpng' | |
var imageminGiflossy = require('imagemin-giflossy'); | |
//compress all images | |
gulp.task('imagemin', function() { | |
return gulp.src(['app/**/*.{gif,png,jpg}']) | |
.pipe(cache(imagemin([ | |
//png | |
imageminPngquant({ | |
speed: 1, | |
quality: [0.95, 1] //lossy settings | |
}), | |
imageminZopfli({ | |
more: true | |
// iterations: 50 // very slow but more effective | |
}), | |
//gif | |
// imagemin.gifsicle({ | |
// interlaced: true, | |
// optimizationLevel: 3 | |
// }), | |
//gif very light lossy, use only one of gifsicle or Giflossy | |
imageminGiflossy({ | |
optimizationLevel: 3, | |
optimize: 3, //keep-empty: Preserve empty transparent frames | |
lossy: 2 | |
}), | |
//svg | |
imagemin.svgo({ | |
plugins: [{ | |
removeViewBox: false | |
}] | |
}), | |
//jpg lossless | |
imagemin.jpegtran({ | |
progressive: true | |
}), | |
//jpg very light lossy, use vs jpegtran | |
imageminMozjpeg({ | |
quality: 90 | |
}) | |
]))) | |
.pipe(gulp.dest('dist')); | |
}); |
Had already compressed JPEG and PNG images using online image compressing and optimising tools.
But thought to gave this script a shot. Results: Compressed PNG by further 855B whereas interestingly increase JPEG size by 22KB (348KB -> 370KB). But overall, a good minification script 👍
In imagemin 7.1.0 now use
imagemin.mozjpeg({
progressive: true
}),
this is an outdated option
imagemin.jpegtran({
progressive: true
}),
@GKoil how is it possible??? How they can change lossless method to loss by default???
work for me
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var imageminPngquant = require('imagemin-pngquant');
var imageminZopfli = require('imagemin-zopfli');
var imageminMozjpeg = require('imagemin-mozjpeg'); //need to run 'brew install libpng'
var imageminGiflossy = require('imagemin-giflossy');
function optimizeImages(done){
gulp.src('resources/assets/images/*')
.pipe(imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 5
}))
.pipe(cache(imagemin([
//png
imageminPngquant({
speed: 1,
quality: [0.95, 1] //lossy settings
}),
imageminZopfli({
more: true
// iterations: 50 // very slow but more effective
}),
//gif
// imagemin.gifsicle({
// interlaced: true,
// optimizationLevel: 3
// }),
//gif very light lossy, use only one of gifsicle or Giflossy
imageminGiflossy({
optimizationLevel: 3,
optimize: 3, //keep-empty: Preserve empty transparent frames
lossy: 2
}),
//svg
imagemin.svgo({
plugins: [{
removeViewBox: false
}]
}),
//jpg lossless
imagemin.mozjpeg({
progressive: true
}),
//jpg very light lossy, use vs jpegtran
imageminMozjpeg({
quality: 90
})
])))
.pipe(gulp.dest('public/images'))
done();
}
var resourcesOptimization = gulp.series(optimizeImages);
gulp.task('build', resourcesOptimization);
gulp.task('default', resourcesOptimization);
Thanks
any idea for making png progressive/interlaced