适当调整图片大小
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
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
图片,除非尺寸足以满足其使用需求。请参阅在博文和页面中插入图片。
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2019-05-02。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2019-05-02\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2019-05-02。"],[],[]]