gulp - 如何使用 gulp-imagemin + 插件获得最佳的 PNG 压缩？

Question

我正在尝试获得压缩 png 的最佳设置。

我发现这里有一些适用于 imagemin 的插件:
https://www.npmjs.com/browse/keyword/imageminplugin

我已经尝试了所有 PNG 选项，但压缩率似乎很差。

示例图像原始大小 - 1.4MB

TinyPNG.com - 413KB

pngquant - 541KB

pngout - 无法让它工作 - 见 https://github.com/imagemin/imagemin-pngout/issues/2

pngcrush - 992KB

optipng(默认选项)- 906KB

advpng - 906KB

pngquant 似乎具有最高的压缩率，(显然是最差的质量)与 tinypng 的质量相似，但仍然可以更接近 tinypng 的数字。

基本上我有3个问题:

问题一:
更改 advpng 和 optipng 的选项似乎不会改变文件大小，这是一个示例，我是否正确使用它？
我猜它可能根本不使用我的设置并回退到默认设置？如果您注意到这两个的文件大小相同!:

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

问题2:
我是否正确使用了“pngout”？有没有我不知道的使用方法？他们页面上的示例似乎不起作用，这种方法也不起作用:

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

问题三:
有没有更好的方法来处理我还没有找到的 png 压缩？
理想情况下，我想以某种方式获得一种具有 pngquant 速率的方法，但质量要好一些。

Answer 1

经过长时间的反复试验，我设法获得了 imagemin-pngquant 插件来生成与 TinyPNG.com 类似的小尺寸图像。仍然大一点，但图像的某些部分看起来比 TinyPNG.com 的结果要好。

输入图像大小:1.1MB
TinyPNG.com:223kb
imagemin-pngquant:251kb

我使用了下一个插件设置:

{
    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).
}

此外，从 .png 生成 .webp 图像并将其提供给支持此格式的浏览器可能是一个好主意，并以 .png 作为备份。有关 .webp 图像格式的更多信息:Google Developer Section

从优化的图像(质量损失最小)生成 .webp 后，图像大小为 62kB。您可以使用带有 gulp-rename 的 imagemin-webp 插件将图像流式传输到具有相同基本名称但扩展名不同的 dist 文件夹。 gulp 任务示例:

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