对图片进行高效编码
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Lighthouse 报告的“优化建议”部分列出了所有未优化的映像,这些映像可能会节省 KiB。优化这些图片,以加快网页加载速度并消耗更少的数据:
Lighthouse 如何将图片标记为可优化
Lighthouse 会收集页面上的所有 JPEG 或 BMP 图片,将每张图片的压缩级别设置为 85,然后将原始版本与压缩版本进行比较。如果有望节省 4KiB 或更大内存,Lighthouse 会将图片标记为可优化。
如何优化图片
您可以采取多种措施来优化图片,包括:
另一种方法是通过安装到计算机上并作为 GUI 运行的优化器来运行图片。例如,使用 ImageOptim 可将图片拖放到界面后,系统会自动压缩图片,而不会明显影响图片质量。如果您运行的是小型网站,并且可以手动优化所有图片,则此选项可能已经足够了。
另一种方法是使用 Squoosh。
Squoosh 由 Google Web DevRel 团队进行维护。
针对特定堆栈的指南
Drupal
考虑使用一个模块,该模块可自动优化通过网站上传的图片并缩减其大小,同时保持质量。此外,请确保对网站上呈现的所有图片使用 Drupal 的内置自适应图片样式(在 Drupal 8 及更高版本中提供)。
Joomla
请考虑使用图片优化插件,它可压缩图片并保持质量。
Magento
请考虑使用可优化图片的第三方 Magento 扩展程序。
WordPress
请考虑使用图片优化 WordPress 插件,在保持图片质量的同时压缩图片。
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 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。"],[],[]]