运行 Lighthouse
此问题很小,其图片可以手动检查。不过,对于大多数网站来说,使用 Lighthouse 等工具自动执行这项测试至关重要。
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
- 点击 Lighthouse 标签页。
- 确保类别列表中的效果复选框处于选中状态。
- 点击生成报告按钮。
- 查找适当调整图片大小审核的结果。
Lighthouse 审核结果显示,此页面的两个图片都需要调整大小。
修复了 flower_logo.png
从页面顶部开始,修正徽标图片。
- 在 DevTools 的“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 宽度设置为“浏览器宽度的 1/2”。(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). 这比我们调整后的图片小得多。
您是否应将图片的尺寸缩小到更小?可能。不过,答案并不总是明确的。
这里的权衡取舍在于高分辨率设备上的图片质量和性能。用户检查图像的程度很容易高估,因此您可能应该减小图像,但确实有些用例的图片质量更重要。
好消息是,您可以使用自适应图片来提供多种图片尺寸,从而完全规避这种权衡。如需详细了解,请参阅“自适应图片”指南。