Imagemin 不足以获取 google 页面速度见解?
Imagemin not enough for google page speed insights?
我使用 gulp-imagemin 有一段时间了,但几个月前我注意到我的压缩图像 google 页面速度不令人满意。我尝试了所有设置组合但没有结果。还尝试了 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
)仅进行无损转换。
我能得到的最好的(我想是无损的):
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 页面速度分辨率=/
我使用 gulp-imagemin 有一段时间了,但几个月前我注意到我的压缩图像 google 页面速度不令人满意。我尝试了所有设置组合但没有结果。还尝试了 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
)仅进行无损转换。
我能得到的最好的(我想是无损的):
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 页面速度分辨率=/