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

Question

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

gulpgulp-imageminimagemin

8

我正在尝试获得最佳的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个问题：

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

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

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

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

问题三：有没有更好的方法来处理png压缩，我还没找到？理想情况下，我希望能够得到一个具有pngquant速率的方法，但质量稍微好一点。

- joep

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oksana Romaniv · Accepted Answer

经过一番试错，我终于成功地使用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开发者文档。

在优化图像后（最小化质量损失），生成的.webp图像大小为62kB。您可以使用imagemin-webp插件和gulp-rename来流式传输图像到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));
});