2

我使用 gulp-imagemin 有一段时间了，但几个月前我注意到我的压缩图像无法满足谷歌页面的速度。我尝试了所有设置组合，但没有结果。还尝试了 imagemin-cli 和直接 jpegtran - 同样，在大图像上它提供 2-5% 的压缩率，而 tinyfy 提供 50% 的压缩率。当我使用一些云优化器（tinify）时，它会提供正确的压缩。

我当前的 gulp 任务如下所示：

gulp.task('imagemin', function() {
        return gulp.src(input_files)
            .pipe(newer(output_path))
            .pipe(imagemin([
                imagemin.gifsicle({interlaced: true}),
                imagemin.jpegtran({progressive: true}),
                imagemin.optipng({optimizationLevel: 7}),
                imagemin.svgo({plugins: [{removeViewBox: true}]})
            ],{verbose:true}).on('error', gutil.log))
            .pipe(gulp.dest(output_path));
});
4

2 回答 2

2

我通过使用https://www.npmjs.com/package/imagemin-jpeg-recompress解决了这个问题，它也可以在 Gulp 中使用。

在我的情况下，我使用的是 ES2015 和 Gulp 4，任务回调驻留在它们自己的文件中，但是您应该通过查看我的代码来了解这个想法：

'use strict';

import config from '../config';
import gulp from 'gulp';
import imagemin from 'gulp-imagemin';
import imageminJpegRecompress from 'imagemin-jpeg-recompress';

export default function() {
  return gulp.src([config.jekyll.imagedir + config.glob.deep.image])
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}),
      imageminJpegRecompress({progressive: true, method: 'smallfry', quality: 'veryhigh'}),
      imagemin.optipng(),
      imagemin.svgo({plugins: [{cleanupIDs: false}]})
    ], {verbose: true}))
    .pipe(gulp.dest(config.jekyll.imagedir));
};

但请注意，这意味着使用有损算法压缩 JPEG 文件，而https://github.com/imagemin/imagemin-jpegtran（gulp-imagemin默认使用）仅进行无损转换。

于 2017-05-22T18:49:29.377 回答
2

我能得到的最好的（我想是无损的）：

const imageminMozJpeg = require(config.nm + 'imagemin-mozjpeg');
const imageminPngQuant = require(config.nm + 'imagemin-pngquant');
gulp.task('imagemin', function() {
    return gulp.src(input_files)
        .pipe(newer(output_path))
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imageminMozJpeg(),
            imageminPngQuant({quality:'85-100'}),
            imagemin.svgo({plugins: [{removeViewBox: true}]})
        ]))
        .pipe(gulp.dest(output_path));
});

Google 仍然对响应式图像不满意，当实际尺寸大于某些 google 页面速度分辨率上显示的尺寸时=/

于 2017-05-23T14:57:41.493 回答