Как получить лучшее сжатие PNG с плагинами gulp-imagemin +?

Question

Я пытаюсь получить наилучшие настройки для сжатия PNG.

Я обнаружил, что здесь есть несколько плагинов для imagemin: https://www.npmjs.com/browse/keyword/imageminplugin

Я перепробовал все варианты PNG, но степень сжатия кажется довольно плохой.

• пример изображения, оригинальный размер - 1,4 МБ
• TinyPNG.com - 413 КБ
• pngquant - 541 КБ
• pngout - не могу заставить его работать - см. https://github.com/imagemin/imagemin-pngout/issues/2
• pngcrush - 992 КБ
• optipng (параметры по умолчанию) - 906 КБ
• advpng - 906 КБ

pngquant, по-видимому, имеет самую высокую степень сжатия (очевидно, наихудшего качества), схожую с качеством tinypng, но все же может приблизиться к цифре tinypng.

По сути у меня есть 3 вопроса:

Вопрос 1: Изменение параметров как advpng, так и optipng, похоже, не влияет на размер файла. Вот пример, правильно ли я это использую? Я предполагаю, что, возможно, он вообще не использует мои настройки и возвращается к настройкам по умолчанию? Если вы заметили, что размеры этих файлов идентичны!:

.pipe(imagemin(
    imageminOptipng({
        optimizationLevel: 4
    })
))

Вопрос 2: правильно ли я использую "pngout"? Есть ли способ использовать его, о котором я не знаю? Примеры с их страницы, похоже, не работают, и этот метод тоже не работает:

.pipe(imagemin([
    imageminPngout({
        strategy: 1
    })
]))

Вопрос 3: Есть ли лучший способ справиться со сжатием PNG, который я еще не нашел? В идеале я хотел бы как-то получить метод, который имеет скорость pngquant, но качество немного лучше.

Answer 1

После долгого процесса проб и ошибок мне удалось получить плагин imagemin-pngquant для создания изображения такого же маленького размера, что и TinyPNG.com. Все еще немного больше, но некоторые части изображения выглядели лучше, чем результат TinyPNG.com.

Размер входного изображения: 1,1 МБ
TinyPNG.com: 223 КБ
imagemin-pngquant: 251 КБ

Я использовал следующие настройки плагина:

{
    quality: '70-90', // When used more then 70 the image wasn't saved
    speed: 1, // The lowest speed of optimization with the highest quality
    floyd: 1 // Controls level of dithering (0 = none, 1 = full).
}

Также может быть хорошей идеей сгенерировать изображения.webp из.png и предоставить его браузерам, которые поддерживают этот формат, с.png в качестве резервной копии. Подробнее о формате изображения.webp: Раздел для разработчиков Google

После создания.webp из оптимизированного изображения (с минимальной потерей качества) размер изображения составил 62 КБ. Вы можете использовать плагин imagemin-webp с gulp-rename для потоковой передачи изображений в папку dist с тем же базовым именем, но с другим расширением. Пример задания глотка:

const config = require('./src/gulp/config.json');

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const imageminWebp = require('imagemin-webp');

gulp.task('images', function () {
    return gulp.src(config.src.images)
        pipe(plugins.imagemin([imageminWebp({
            method: 6,
        })]))
        .pipe(plugins.rename({ extname: '.webp' }))
        .pipe(gulp.dest(config.dist.images));
});