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

pmpquant似乎具有最高的压缩率，（显然质量最差）与tinypng相似的质量，但仍然可以接近tinypng数字。

基本上我有3个问题：

问题1： 更改advpng和amp;的选项optipng似乎没有改变文件大小，这是一个例子，我正确使用它吗？我猜它可能根本就没有使用我的设置并且回到默认设置？如果您注意到这两个文件大小相同！：

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

问题2： 我在使用＆＃34; pngout＆＃34;在正确吗？有没有一种方法可以使用我不知道的方法？他们页面上的例子似乎不起作用。这种方法也没有：

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

问题3： 有没有更好的方法来处理我还没有找到的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));
});

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

1 个答案: