CODEWITHSUNDEEP
gulpgulp-imagemin
Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

Gulp image optimizer(gulp-imagemin) not fully optimize

I am using gulp to compile my work, Recently I am using gulp-imagemin plugin to optimize the images, and its working but still not fully optimize.On Google PageSpeed Insights showing the images are not fully optimize.How to fully optimize my images? Please help. This is the function I am using on my gulpfile.js, And it reducing about 2-5% images size.But not fully optimize. 

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            pngquant: true
        }))
        .pipe(flatten())
        .pipe(gulp.dest(paths.build + "/img"));
});

Here is the screenshot where Google PageSpeed Insights showing images are not optimize. screenshot

Upvotes: 0

Views: 1434

Answers (3)

Amit Chowdhury
Amit Chowdhury

Reputation: 1

Use gulp-image with imagemin jpegRecompress plugin. It is giving much better result. File size reducing by more than 70%. You just have to take care of error handling because some times command fails.

Upvotes: 0

Вано Шмидт
Вано Шмидт

Reputation: 11

I've just faced with the same trouble and I decided to move from the default imagemin-jpegtran to a imageminMozjpeg plugin.

First you need to install imagemin-mozjpeg:

npm install --save imagemin-mozjpeg

Then add this row into your gulpfile.js:

var imageminMozjpeg = require('imagemin-mozjpeg');

And slightly change the code where you piped the imagemin tool

.pipe(imagemin(
    [imageminMozjpeg()],
    {verbose: true}         // Enabling this will log info on every image passed to gulp-imagemin
))

It also removes images metadata. The result is amazing: gulp-imagemin working process log

Upvotes: 1

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

This one working much better..

gulp.task('imgs', function () {
    gulp
        .src(paths.assets.images)
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(flatten())
        .pipe(gulp.dest(paths.build + "/images"));
});

Upvotes: 0

Related Questions