运行 Lighthouse
此错误足够小,可以手动检查其图片。不过,对于大多数网站而言,使用 Lighthouse 等工具自动执行此操作至关重要。
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
- 按 `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). 这比我们调整大小的图片小得多。
您是否应将图片的尺寸缩小到更小?可能。不过,答案并不总是明确的。
这里的权衡取舍在于高分辨率设备上的图片质量和性能。我们很容易高估用户会仔细观察图片的程度,因此您可能需要缩小图片大小。不过,在某些用例中,图片质量更为重要。
好消息是,您可以使用自适应图片来提供多种图片尺寸,从而完全规避这种权衡。如需详细了解,请参阅“响应式图片”指南。