运行 Lighthouse
这个小故障的图像足够小,可以手动检查。不过,对于大多数网站来说,必须使用 Lighthouse 等工具自动执行该操作。
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保已选中类别列表中的效果复选框。
- 点击生成报告按钮。
- 查看适当调整图片大小审核的结果。
Lighthouse 审核显示此页面的两张图片都需要调整大小。
修正 flower_logo.png
从页面顶部开始,修正徽标图片。
- 在开发者工具的“Elements”面板中检查
flower_logo.png
。
以下是 flower_logo.png
的 CSS:
.logo {
width: 50px;
height: 50px;
}
此图片的 CSS 宽度为 50 像素,因此应调整 flower_logo.png
的大小以保持一致。您可以使用 ImageMagick 将图片大小调整为合适大小。ImageMagick 是一款用于图片编辑的 CLI 工具,已预安装在 Codelab 环境中。
- 点击 Remix to Edit 使项目可修改。
- 点击终端(注意:如果“终端”按钮未显示,您可能需要使用“全屏”选项)。
- 在控制台中,输入以下内容:
convert flower_logo.png -resize 50x50 flower_logo.png
修复 flower_photo.jpg
接下来,修正紫色鲜花的照片。
- 在开发者工具元素面板中检查
flower_photo.jpg
。
以下是 flower_photo.jpg
的 CSS:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
将 flower_photo.jpg
的 CSS 宽度设置为“浏览器宽度的一半”。(1vw 等于浏览器宽度的 1%)。
图片的理想尺寸取决于查看图片的设备,因此您应将其调整为适合大多数用户的尺寸。您可以查看分析数据,了解用户常见的屏幕分辨率:
这些数据表明,此网站有 95%以上的访问者使用的屏幕分辨率不超过 1920 像素。
利用这些信息,我们可以计算出图片的宽度应为: (宽度为 1920 像素)*(浏览器宽度的 50%)= 960 像素
如果分辨率高于 1920 像素,图片将被拉伸以覆盖该区域。调整后的图片仍然相当大,因此其效果应该不是很明显。
- 使用 ImageMagick 将图片的宽度调整为 960 像素。在终端类型中:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
重新运行 Lighthouse
- 重新运行 Lighthouse 性能审核以验证您是否已成功调整图片的大小。
...但是失败了!这是为什么?
Lighthouse 在 Nexus 5x 上运行测试。Nexus 5x 的屏幕为 1080 x 1920。
对于 Nexus 5x,flower_photo.jpg
的最佳尺寸为宽 540 像素(1080 像素 *5)。这比我们调整后的图片小得多。
是否应将图片调整得更小?有可能。不过,这个问题的答案并非总是很明确。
此时,您需要权衡高分辨率设备上的图片质量与性能。我们很容易高估用户检查图片的密切程度(因此应该将图片调小一些),但在某些用例中,图片质量确实更为重要。
好消息是,您可以使用自适应图片传送多种尺寸的图片,从而完全绕过这项权衡。您可以在自适应图片指南中了解详情。