提供具有正确尺寸的图片

Katie Hempenius

若要按照此 Codelab 操作，请在第二个标签页中打开此 Glitch。

运行 Lighthouse

这个小故障的图像足够小，可以手动检查。不过，对于大多数网站来说，必须使用 Lighthouse 等工具自动执行该操作。

1. 如需预览网站，请按查看应用，然后按全屏 。
2. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
3. 点击 Lighthouse 标签页。
4. 确保已选中类别列表中的效果复选框。
5. 点击生成报告按钮。
6. 查看适当调整图片大小审核的结果。

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 环境中。

1. 点击 Remix to Edit 使项目可修改。
2. 点击终端（注意：如果“终端”按钮未显示，您可能需要使用“全屏”选项）。
3. 在控制台中，输入以下内容：

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

注意 ：960x 不是拼写错误；它指定了宽度，而不是高度。图片高度将根据宽度按比例缩放。当您只关心图像在一个方向的尺寸时，这是一个便利的技巧。

重新运行 Lighthouse

• 重新运行 Lighthouse 性能审核以验证您是否已成功调整图片的大小。

...但是失败了！这是为什么？

Lighthouse 在 Nexus 5x 上运行测试。Nexus 5x 的屏幕为 1080 x 1920。 对于 Nexus 5x，flower_photo.jpg 的最佳尺寸为宽 540 像素（1080 像素 *5)。这比我们调整后的图片小得多。

是否应将图片调整得更小？有可能。不过，这个问题的答案并非总是很明确。

此时，您需要权衡高分辨率设备上的图片质量与性能。我们很容易高估用户检查图片的密切程度（因此应该将图片调小一些），但在某些用例中，图片质量确实更为重要。

好消息是，您可以使用自适应图片传送多种尺寸的图片，从而完全绕过这项权衡。您可以在自适应图片指南中了解详情。