问题描述
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。您应该尽可能地这样做。
这不能直接替代您链接的文档,但是可以以可比的质量缩小图像尺寸。