Gulp-imagemin not good enough for Google PageSpeed ​​Insights?

Question

JavaScript

I use this tactic for image optimization:

// Таск для оптимизации изображений
gulp.task('img:prod', function () {
  return gulp.src(path.src.img) //Выберем наши картинки
    .pipe(debug({title: 'building img:', showFiles: true}))
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imagemin.jpegtran({progressive: true}),
      imagemin.optipng({optimizationLevel: 7}), //optimizationLevel - это кол-во проходов, диапазон 0-7
      imagemin.svgo({plugins: [{removeViewBox: true}]})
    ]))
    .pipe(gulp.dest(path.prod.img)) //И бросим в prod
});

The task is worked out with a bang, all images are optimized, no errors. BUT when checking on the well-known Google PageSpeed ​​Insights, the recommendation (in red) "Optimize images" pops up and the list .. there 99% of the images are highlighted as not optimized. what am I doing wrong? because Google itself recommends using optipng and jpegtran which is used in Gulp-imagemin.

Answer 1

Use mozjpeg - it gives great results. Here is my config:

var gulp   = require('gulp'),
    chalk = require('chalk'),
    plugin = require('gulp-load-plugins')(),
    browserSync = require('browser-sync').create();
plugin.imagemin.mozjpeg = require('imagemin-mozjpeg');
plugin.imagemin.pngquant = require('imagemin-pngquant');

gulp.task('img', function () {
  gulp.src(path.src.img)
    .pipe(plugin.plumber({
      errorHandler: plugin.notify.onError("Ошибка: <%= error.message %>")
    }))
    .on('end', function(){ plugin.util.log(chalk.cyan('Инициализирован обработчик ошибок изображений')); })
    .pipe(plugin.imagemin([
            plugin.imagemin.gifsicle({interlaced: true}),
            plugin.imagemin.jpegtran({progressive: true}),
            plugin.imagemin.mozjpeg({progressive: true}),
            plugin.imagemin.optipng({optimizationLevel: 7}),
            plugin.imagemin.pngquant({quality: '85-100'}),
            plugin.imagemin.svgo({plugins: [{removeViewBox: true}]})
        ]))
    .pipe(gulp.dest(path.build.img))
    .on('end', function(){ plugin.util.log(chalk.cyan('Оптимизированы изображения')); })
    .pipe(browserSync.stream());
});