Lighthouse 报告的“优化建议”部分会列出您页面中大小不当的所有图片，以及可能节省的千比字节 (KiB) 内存。调整这些图片的大小可节省数据流量并缩短网页加载时间：
Lighthouse 如何计算超大图片
对于页面上的每张图片，Lighthouse 会将所渲染图片的大小与实际图片的大小进行比较。呈现的尺寸还会考虑设备像素比。如果渲染的大小比实际大小至少小 4KiB，则图片无法通过审核。
合理调整图片大小的策略
理想情况下，您的网页不应传送大于用户屏幕上所呈现版本的图片。任何大于此大小的文件都会浪费字节并减慢网页加载速度。
提供适当大小的图片的主要策略称为“自适应图片”。借助自适应图片，您可以为每张图片生成多个版本，然后通过媒体查询、视口尺寸等指定要在 HTML 或 CSS 中使用的版本。此外，RespImageLint 也是一个非常实用的小书签，用于确定图片的最佳 srcset 和 sizes 值。如需详细了解这些属性，请参阅提供自适应图片。
图片 CDN 是提供适当大小的图片的另一种主要策略。 您可以将图片 CDN 视为用于转换图片的网络服务 API。
另一种策略是使用基于矢量的图片格式，例如 SVG。只需少量代码，SVG 图片就可以缩放到任何大小。如需了解详情，请参阅使用 SVG 替换复杂图标。
gulp-responsive 或 response-images-generator 等工具有助于自动执行将图片转换为多种格式的过程。还有一些图片 CDN 可让您生成多个版本，无论是在上传图片时，还是从网页中请求图片时。
针对特定堆栈的指南
AMP
利用 amp-img 组件对 srcset 的支持，根据屏幕尺寸指定要使用的图片素材资源。另请参阅使用 srcset、sizes 和 heights 自适应图片。
Angular
请考虑使用组件开发套件 (CDK) 中的 BreakpointObserver 实用程序管理映像断点。
Drupal
在通过视图模式、视图或通过 WYSIWYG 编辑器上传的图片呈现图片字段时，请使用内置的自适应图片样式功能（在 Drupal 8 及更高版本中提供）。
盖茨比
使用 gatsby-image 插件为智能手机和平板电脑生成多张较小的图片。它还可以创建 SVG 图片占位符，以实现高效延迟加载。
Joomla
考虑使用自适应图片插件。
WordPress
直接通过媒体库上传图片，以确保提供所需的图片尺寸，然后从媒体库插入图片，或使用图片 widget 来确保使用最佳图片尺寸（包括适用于自适应断点的尺寸）。避免使用 Full Size 图片，除非尺寸足以满足其使用需求。请参阅在博文和页面中插入图片。