Lighthouse 报告的“优化建议”部分会列出您页面中大小不当的所有图片,以及可能节省的千比字节 (KiB) 内存。调整这些图片的大小可节省数据流量并缩短网页加载时间:
![Lighthouse 正确调整图片大小的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-responsive-images/image/a-screenshot-the-lightho-7c337c3ae8988.png?authuser=7&hl=ro)
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
图片,除非尺寸足以满足其使用需求。请参阅在博文和页面中插入图片。