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

Question

我正在尝试使用 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'));       
    });

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

提前致谢！！

score 0 · Accepted Answer

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

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，所以请确保您首先安装了图形库

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

1 回答 1

Related

Reference