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