Как создавать прогрессивные изображения JPG / JPEG без потерь с помощью Gulp

Я пытаюсь оптимизировать изображения с помощью gulp и наткнулся на следующие плагины, которые могут мне в этом помочь.

  1. https://www.npmjs.com/package/gulp-imagemin
  2. https://www.npmjs.com/package/imagemin-jpeg-recompress

Но когда я пытаюсь оптимизировать jpeg и сделать их прогрессивными, выходное изображение не будет равно по качеству (цвету, четкости) исходному. Я пробовал максимальное и минимальное качество (100) в плагине №2, но качество все равно ухудшилось. Я не уверен, где что-то не так.

// 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'));       
    });

Если кто-то знает какой-нибудь другой плагин для оптимизации и создания прогрессивных изображений без ухудшения качества? Любая помощь будет оценена по достоинству.

Заранее спасибо!!


gulp jpeg gulp-imagemin
person GMCS Pune    schedule 07.12.2015    source источник
comment
Что, если вы просто используете для этого imagemin, например: gist.github.com/divspace/bda6196a0a0d55120c9a   -  person Kyle Anderson    schedule 07.12.2015
comment
@KyleAnderson Я тоже пробовал. Это ухудшает качество изображения. Я хочу, чтобы JPEG был прогрессивным и оптимизированным до такой степени, чтобы он выглядел так же хорошо, как исходное изображение.   -  person GMCS Pune    schedule 08.12.2015
comment
gulp-imagemin по своей природе является конвертером без потерь, но я наблюдаю преобразование цвета при тестировании с фотовспышками .files.wordpress.com / 2011/10 / img_4576.jpg. Исходная информация о цвете не сохраняется, и вы можете видеть тонкие цветовые различия   -  person AnthumChris    schedule 08.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я рекомендую использовать gulp-gm, который использует более надежную графическую библиотеку (GraphicsMagick или ImageMagick) и будет сохранить цветовые профили. Приведенный ниже сценарий создаст прогрессивное изображение с использованием значения "Line", как указано в 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. Я установил GraphicsMagick на Mac, поэтому сначала убедитесь, что у вас установлена ​​графическая библиотека.

person AnthumChris    schedule 08.12.2015