更新了适用于JPG和PNG的Pageinsights兼容的图像优化命令

问题描述

https://developers.google.com/speed/docs/insights/OptimizeImages处的文档已弃用警告消息。

更新文档的链接不包含有关建议的转换命令的详细信息。

更新后的Google Pagespeed Insights版本的优化要求是否有变化?

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png

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

我还检查了Pagespeed Insights API的Github页面中的示例,但没有提到优化图像。

解决方法

简短答案

如果为jpg,则图像必须至少具有85%的压缩率。对于PNG,如果不透明,请删除Alpha通道。您还应该使用tinypng这样的优化工具来为png减轻重量(尽管Lighthouse不会报告此问题)

长答案

本指南已替换为两个不同的文档(据我所知)

https://web.dev/uses-optimized-images/

https://web.dev/uses-webp-images/

第一个文档是主要文档。

所有这些指导原则上都是在说“不要通过有线方式发送比所需更多的信息”。

例如,如果您发送未压缩的JPEG,则可能以70%的质量发送比JPEG大小大2.3,甚至三倍的文件。质量差异几乎不会引起注意,但是如果您有多张图像,速度差异可能会很大。

要求压缩率至少为85%。

灯塔要做的是在将压缩级别设置为85%之后检查文件大小,如果保存的文件大小超过4Kb,则会显示图像警告。

关于如何,您可以实现完全取决于您以及所运行的任何服务器环境/语言的压缩。

如果在您的示例中使用convert binary,可能以4:2:2的采样率进行色度二次采样并将质量设置为75,则由于编写了该指南,因此屏幕比起压缩率介于85%和75%之间的质量差异。不过,这纯粹是一个建议,您要做最适合自己的事情。

我链接的第二个文档是using WebP images in compatible browsers。您应该尽可能地这样做。

这不能直接替代您链接的文档,但是可以以可比的质量缩小图像尺寸。