Lighthouse 报告的“优化建议”部分列出了所有未优化的映像,这些映像可能会节省 KiB。优化这些图片,以加快网页加载速度并消耗更少的数据:
![Lighthouse 高效编码图片审核的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-optimized-images/image/a-screenshot-the-lightho-0ecd75d8d7fe8.png?authuser=9&hl=sl)
Lighthouse 如何将图片标记为可优化
Lighthouse 会收集页面上的所有 JPEG 或 BMP 图片,将每张图片的压缩级别设置为 85,然后将原始版本与压缩版本进行比较。如果有望节省 4KiB 或更大内存,Lighthouse 会将图片标记为可优化。
如何优化图片
您可以采取多种措施来优化图片,包括:
使用 GUI 工具优化图片
另一种方法是通过安装到计算机上并作为 GUI 运行的优化器来运行图片。例如,使用 ImageOptim 可将图片拖放到界面后,系统会自动压缩图片,而不会明显影响图片质量。如果您运行的是小型网站,并且可以手动优化所有图片,则此选项可能已经足够了。
另一种方法是使用 Squoosh。 Squoosh 由 Google Web DevRel 团队进行维护。
针对特定堆栈的指南
Drupal
考虑使用一个模块,该模块可自动优化通过网站上传的图片并缩减其大小,同时保持质量。此外,请确保对网站上呈现的所有图片使用 Drupal 的内置自适应图片样式(在 Drupal 8 及更高版本中提供)。
Joomla
请考虑使用图片优化插件,它可压缩图片并保持质量。
Magento
请考虑使用可优化图片的第三方 Magento 扩展程序。
WordPress
请考虑使用图片优化 WordPress 插件,在保持图片质量的同时压缩图片。