通过 Gulp 进行适当的 jpeg 优化？

Question

我将基于 Gulp 插件（例如 imagemin 包）找到 jpg 优化过程的最佳解决方案。我的目标是像 Adobe Photoshop 中的 Save For Web 一样压缩 jpg 文件 - progressive: true and quality: 61.

我有一张图片，以多种方式保存：

01.jpg（Photoshop -> ctrl+s，最佳质量 (12)，格式：基本（标准））- 89.5 KB
02.jpg（Photoshop -> ctrl+s，高质量（8），格式：基本（优化）） - 51.1 KB
03.jpg（Photoshop -> ctrl+s，中等质量（6），格式：渐进式）- 47.5 KB
04.jpg（Photoshop -> Save For Web，高质量（61），格式：progressive） - 29.6 KB

所以，我的目标是通过 Gulp 像 04.jpg 一样压缩 jpg。

原图为01.jpg (89.5 KB)。

imagemin-jpegtran 和 imagemin-jpegoptim 的结果不够好，因为优化级别与 Photoshop 的 Save For Web 相去甚远：

imagemin（内含 jpegtran）-> 51.7 KB

imagemin-jpegoptim - 无法设置（有帮助吗？）

module.exports = function (gulp, plugins, config) {
var jpegoptim = require('imagemin-jpegoptim');

return function(){

    gulp.src(config.assets.images.temp + '**/*.jpg')
        .pipe(jpegoptim({
            progressive: true
        })())
        .pipe(gulp.dest(config.assets.images.src));
}
};

错误：写入 EOF

module.exports = function (gulp, plugins, config) {
var jpegoptim = require('imagemin-jpegoptim');

return function(){
    gulp.src(config.assets.images.temp + '**/*.jpg')
        .pipe(plugins.imagemin({
            progressive: true,
            use: [
                jpegoptim({
                    max: 61
                })()
            ]
        }))
        .pipe(gulp.dest(config.assets.images.src));
}
};

图像损坏（100% 缩小 - 文件损坏）

我尝试使用 imagemin-jpeg-recompress，但出现错误：

Error: Premature end of JPEG file
JPEG datastream contains no image

所以我的问题是...

如何通过 Gulp 获得与通过 Photoshop Save For Web 相同的结果？

Answer 1

首先，JPEG中没有"quality"这样的东西。质量是许多 JPEG 编码器用于 select 量化 table 的一种机制。除非两个编码器 select 对相同的质量值进行完全相同的量化 table，否则在不同的编码器上使用相同的 "quality" 会得到不同的结果。

您需要找到正确的压缩设置组合，以实现您想要的 GULP。

您需要的设置是：渐进式或顺序式。渐进式 JPEG 通常比顺序压缩效果更好。如果使用逐行扫描，可以调整扫描次数。

调整采样可以提高压缩率。

量化 table selection 也可以提高压缩率。

您的编码器可能允许您在动态（更好但更慢）和静态（更差但更快）创建的霍夫曼 tables.

之间进行选择

您必须尝试所有这些设置才能获得您想要的结果。

Answer 2

问题出在插件 imagemin jpeg recompress - 它在 Windows 中有问题，最近已修复。所以，我的问题不再是实际的了。

通过 Gulp 进行适当的 jpeg 优化？

Proper jpeg optimization via Gulp?

optimization

jpeg

image

gulp

imagemin