如何使用 Gulp 创建无损渐进式 JPG/JPEG 图像答案

【问题标题】：How To Create Lossless Progressive JPG/JPEG Images with Gulp如何使用 Gulp 创建无损渐进式 JPG/JPEG 图像
【发布时间】：2015-12-07 19:07:04
【问题描述】：

我正在尝试使用 gulp 优化图像，并遇到了以下插件可以帮助我。

但是当我尝试优化 jpeg 并使它们通过它渐进式时，输出图像的质量（颜色，清晰度）与原始图像不同。我在 #2 插件中尝试了最大、最小质量（100），但质量仍然下降。我不确定哪里出了问题。

// This degrades the quality of Image
    var gulp = require('gulp');
    var imagemin = require('gulp-imagemin');
    var imageminJpegRecompress = require('imagemin-jpeg-recompress');

    gulp.task('optimize', function () {
      return gulp.src('src/images/*')
        .pipe(imagemin({
          use:[imageminJpegRecompress({
            progressive: true,
            min: 100,
            max: 100,
            quality:'veryhigh' 
          })]
        }))
    });

// This degrades the quality of Image
    var imagemin = require('gulp-imagemin');
    gulp.task('image1', function () {
        return gulp.src('Content/img/**/*.jpg')
            .pipe(imagemin({
                progressive: true
            }))
            .pipe(gulp.dest('dist'));       
    });

如果有人知道任何其他用于优化和创建渐进式图像而不降低质量的插件？任何帮助将不胜感激。

提前致谢！！

【问题讨论】：

如果您只使用imagemin 会怎样，例如：gist.github.com/divspace/bda6196a0a0d55120c9a
@KyleAnderson 我也试过了。它会降低图像的质量。我希望 JPEG 具有渐进性和优化性，使其看起来与原始图像一样好。
gulp-imagemin 本质上是一个“无损”转换器，但在使用photoflurries.files.wordpress.com/2011/10/img_4576.jpg 进行测试时，我看到了颜色转换。不保留原始颜色信息，可以看到细微的色差

标签： gulp jpeg gulp-imagemin

【解决方案1】：

我建议使用gulp-gm，它使用更强大的图形库（GraphicsMagick 或 ImageMagick），并且会保留颜色配置文件。下面的脚本将使用the interlace() documentation中指定的“Line”值创建一个渐进式图像

const gulp = require('gulp');
const gm = require('gulp-gm');

gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(gm(function (gmfile) {
      return gmfile.interlace('Line')
    }))
    .pipe(gulp.dest('dist/images'))
})

gulp.task('default', ['images'])

注意https://www.npmjs.com/package/gulp-gm 上提供的系统安装说明。我在 Mac 上安装了 GraphicsMagick，所以请确保您先安装了图形库

【讨论】：