如何使用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個問題：

問題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.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));
});