为 JPG 和 PNG 更新了与 Pageinsights 兼容的图像优化命令

Updated Pageinsights compatible Image optimzation commands for JPG & PNG

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

并且 link 更新文档不包含有关推荐转换命令的详细信息。

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 Github 页面中的样本 API,但没有提到优化图像。

简答

如果是 jpg,图片必须至少压缩 85%。对于 PNG,如果不透明,请移除 alpha 通道。您还应该使用优化工具,例如 png 的 tinypng 以尽可能多地去除权重(尽管 Lighthouse 不会报告这一点)

长答案

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

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

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

第一个文件为主。

所有这些指南基本上都是在说“不要发送超过需要的信息”。

例如,如果您发送未压缩的 JPEG,您发送的文件可能比质量为 70% 的 JPEG 大 2.3 甚至 4 倍。质量上的差异几乎看不出来,但如果您有多个图像,速度上的差异可能会很大。

要求压缩率至少为85%。

lighthouse 所做的是在将压缩级别设置为 85% 后检查文件大小,如果文件大小节省超过 4Kb,它将显示图像警告。

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

如果在您的示例中使用 convert binary 可能在 4:2:2 处进行色度二次采样并将质量设置为 75,则屏幕会更加生动,因为编写了该指南,因此颜色更加明显比 85% 和 75% 压缩之间的质量差异。这纯粹是一个建议,你做对你最好的。

我链接的第二个文档是你应该尽可能做的,using WebP images in compatible browsers

这不是您链接的文档的直接替代品,但可以在相当质量的情况下生成更小的图像。