best image compression settings (gulp-imagemin)

gulpfile.js

// 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'));
});

Awesome stuff man! works even better than tinypng

Does this also skip an image if it has already have been compressed? Thanks

@Loosie94 No, it only compress all the images but you can save your files in a temp folder and check sizes .-.

there is no output message like how many files have been minified, when i run this code, what am i doing wrong

I have this error :

Error : write callback called multiple times
at DestroyableTransform.afterTransform (.\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:84:31)
at EventEmitter.signals.on.err (.\node_modules\gulp-cache\lib\index.js:546:4)
at emitOne (events.js:96:13)
at EventEmitter.emit (events.js:188:7)
at DestroyableTransform.onError (.\node_modules\gulp-cache\lib\index.js:366:12)
at DestroyableTransform.g (events.js:291:16)
at emitOne (events.js:101:20)
at DestroyableTransform.emit (events.js:188:7)
at Immediate.<anonymous> (.\node_modules\through2-concurrent\through2-concurrent.js:37:14)
at runCallback (timers.js:651:20)

My task :

gulp.task('minify-img', function() {
    return gulp.src(['./images/*.{gif,png,jpg}'])
        .pipe(cache(imagemin([
            //png
            imageminPngquant({
                speed: 1,
                quality: 98 //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('./images/mini/'));
});

Any idea what's going wrong ?

hey @freddurst1805 i'm assuming you made the error of updating gulp to v4.

it's been re-written so you'll need to rewrite your callback :(
if you downgrade to 3.9.1 and everything works well, then that is the case ;)

Does this also skip an image if it has already have been compressed? Thanks

actually, it does. it's run through gulp-cache so it's only processed once. if you want to clear cache, check the gulp-cache docs, you have to create an extra task for that, after clearing cache all images would be run through the image opt. task again, but always only the ones that aren't in the cache.

For imagemin-pngquant >= 7.0.0 go here

any idea for making png progressive/interlaced

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