Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
best image compression settings (gulp-imagemin)
// 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'));
});
@shelldandy
Copy link

shelldandy commented Feb 14, 2018

Your gulp src is not taking into account svgs even though the settings are there

return gulp.src(['app/**/*.{gif,png,jpg,svg}'])

@taimursaeed
Copy link

taimursaeed commented Apr 4, 2018

Awesome stuff man! works even better than tinypng

@Loosie94
Copy link

Loosie94 commented May 17, 2018

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

@HoracioEspinosa
Copy link

HoracioEspinosa commented May 17, 2018

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

@Anurella
Copy link

Anurella commented Aug 30, 2018

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

@freddurst1805
Copy link

freddurst1805 commented Nov 2, 2018

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 ?

@Showcase-Joz
Copy link

Showcase-Joz commented Nov 14, 2018

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 ;)

@madsem
Copy link

madsem commented Dec 10, 2018

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.

@darkdiesel
Copy link

darkdiesel commented Feb 22, 2019

For imagemin-pngquant >= 7.0.0 go here

@vsanse
Copy link

vsanse commented May 28, 2019

any idea for making png progressive/interlaced

@waleedshkt
Copy link

waleedshkt commented Aug 4, 2019

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 👍

@GKoil
Copy link

GKoil commented Jun 10, 2020

In imagemin 7.1.0 now use

imagemin.mozjpeg({
                progressive: true
}),

this is an outdated option

imagemin.jpegtran({
     progressive: true
}),

@Alexufo
Copy link

Alexufo commented Jun 16, 2020

@GKoil how is it possible??? How they can change lossless method to loss by default???

@JsebasC
Copy link

JsebasC commented Sep 17, 2020

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);

@neverkas
Copy link

neverkas commented Apr 1, 2021

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment