我使用 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));
});
最佳答案
我通过使用 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
中使用)仅进行无损转换。
关于gulp - Imagemin 不足以洞察 Google 页面速度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43632747/