Imagemin не достаточно для понимания скорости страницы Google?

Question

Я использую gulp-imagemin некоторое время, но несколько месяцев назад я заметил, что скорость страницы Google не удовлетворяет мои сжатые изображения. Я перепробовал все комбинации настроек, но безрезультатно. Также пробовал imagemin-cli и прямой jpegtran - все равно, на больших изображениях это дает 2-5% сжатия, а tinyfy дает 50%. Когда я использую некоторые облачные оптимизаторы (tinify), это дает правильное сжатие.

Моя текущая задача глотка выглядит так:

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

Answer 1

Лучшее, что я мог получить (я полагаю, без потерь):

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 по-прежнему недоволен адаптивными изображениями, когда реальный размер больше, чем отображаемый размер на некоторых разрешениях страницы Google =/

Answer 2

Я решил это с помощью https://www.npmjs.com/package/imagemin-jpeg-recompress, который также можно использовать в Gulp.

Я использую ES2015 и Gulp 4 в моем случае, и обратные вызовы задач находятся в их собственных файлах, но вы должны понять это, посмотрев на мой код:

'use strict';

import config from '../config';
import gulp from 'gulp';
import imagemin from 'gulp-imagemin';
import imageminJpegRecompress from 'imagemin-jpeg-recompress';

export default function() {
  return gulp.src([config.jekyll.imagedir + config.glob.deep.image])
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imageminJpegRecompress({progressive: true, method: 'smallfry', quality: 'veryhigh'}),
      imagemin.optipng(),
      imagemin.svgo({plugins: [{cleanupIDs: false}]})
    ], {verbose: true}))
    .pipe(gulp.dest(config.jekyll.imagedir));
};

Но имейте в виду, что это означает сжатие файлов JPEG с алгоритмом с потерями, тогда как https://github.com/imagemin/imagemin-jpegtran (используется в gulp-imagemin по умолчанию) выполняет только преобразования без потерь.