Google Pagespeed:如何满足新的图像压缩规则?


14

我们有几页具有良好的Pageseed值-甚至100/100也是如此。但是几天以来,Pagespeed声称在所有站点(技术上不同,服务器不同)上,我们的图像可能会得到更好的优化。

有谁知道该算法究竟更改了什么?在PS 100/100(之前)上,我们使用jpegoptim,因此我们真的不知道如何进一步优化。图像由我们的应用程序上传,然后进行了优化。

任何见识将不胜感激。PS的任何地方都有更新日志吗?


您在台式机测试或移动测试中看到该消息了吗?
Goyllo

都掉了……
拉斐尔·杰格

1
不确定是否可以做得更好,但是Google 建议使用jpegtran来优化JPEG图像。看来Google也在推销一种名为WebP的新图像格式,该图像尺寸较小,但浏览器支持较差。
斯蒂芬·奥斯特米勒

我也注意到了这一点。我知道WebPageTest使用JPG的85%质量作为其基准。但是除非质量低于80%,否则我无法接近Google的建议大小。
DisgruntledGoat

Answers:


7

对于以前没有任何问题的页面,我看到的结果同样难看,当然,使用ZURB Foundation这样的响应框架以及响应图像。

过去我使用过:

find . -iname "*.jpg" -exec jpegoptim --strip-all -o -p {} \;

并取得了不错的成绩。

2017年1月解决方案:85%的质量应该可以解决问题:

find . -iname "*.jpg" -exec jpegoptim --strip-all -m85 -o -p {} \;

在Google页面速​​度上回到100/100。

这是我针对ZURB Foundation 6的gulp / npm部署方法的一部分

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, imagemin(
      [
        imagemin.gifsicle({interlaced: true}),
        imageminJpegoptim({
          max: 85,
          progressive: true
        }),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({plugins: [{cleanupIDs: false, removeEmptyAttrs: false, removeViewBox: false}]})
      ],
      {
      },
      {
        verbose: true
      }
    )))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

您需要添加npm模块gulp-imagemin imagemin-jpegoptim

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');

欢迎来到该网站。只是为了澄清一下,您是说您还经历了关于优化图像的相同通知,而以前却没有?如果是这样,您添加的jpegoptim选项是否可以解决该问题?
dan

我们也尝试在jpegtran和jpegoptim中使用不同的设置,无法获得像Google状态这样的小图像……而且,我认为这与图像大小(以像素为单位)无关,因为页面速度显然多样化压缩和像素大小问题。
拉斐尔·杰格

谢谢-这真的很有用。而且您也可以为png做类似的事情find . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;
billynoah

2

您可能还会注意到以下消息:“ 下载此页面的优化图像,JavaScript和CSS资源。 ”如果您在获得Google期望的优化方面遇到困难,他们会为您完成工作。有时,各种工具无法满足Google的需求。


2

谷歌的最新建议是使用imagemagick convert

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

带有具体示例puzzle.jpg

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

在我自己的图像上使用相同的参数,我得到与下载的优化JPG文件相同的结果。


1
请注意,如果您使用的是Windows,请尝试magickif convert不适用于您。magick puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpgimagemagick.org/discourse-server/viewtopic.php?t=19679
user2875289'9
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.