Search code examples
gulpgoogle-pagespeedimageminjpegtran

Imagemin not enough for google page speed insights?


I am using gulp-imagemin for a while, but few months ago i noticed that google page speed unsatisfied by my compressed images. I tried all combinations of settings but without result. Also tried imagemin-cli and direct jpegtran - all the same, on large images it gives 2-5% compression and tinyfy gives 50%. When I use some cloud optimisers(tinify) it give right compression.

My current gulp task looks like:

gulp.task('imagemin', function() {
        return gulp.src(input_files)
            .pipe(newer(output_path))
            .pipe(imagemin([
                imagemin.gifsicle({interlaced: true}),
                imagemin.jpegtran({progressive: true}),
                imagemin.optipng({optimizationLevel: 7}),
                imagemin.svgo({plugins: [{removeViewBox: true}]})
            ],{verbose:true}).on('error', gutil.log))
            .pipe(gulp.dest(output_path));
});

Solution

  • Best i could get (i suppose lossless):

    const imageminMozJpeg = require(config.nm + 'imagemin-mozjpeg');
    const imageminPngQuant = require(config.nm + 'imagemin-pngquant');
    gulp.task('imagemin', function() {
        return gulp.src(input_files)
            .pipe(newer(output_path))
            .pipe(imagemin([
                imagemin.gifsicle({interlaced: true}),
                imageminMozJpeg(),
                imageminPngQuant({quality:'85-100'}),
                imagemin.svgo({plugins: [{removeViewBox: true}]})
            ]))
            .pipe(gulp.dest(output_path));
    });
    

    Google is still unhappy with responsive images, when real size is bigger then displayed size on some google page speed resolution=/