提供具有正确尺寸的图片

Katie Hempenius
Katie Hempenius

此问题很小,其图片可以手动检查。不过,对于大多数网站来说,使用 Lighthouse 等工具自动执行这项测试至关重要。

  1. 如需预览网站,请按查看应用,然后按全屏 全屏
  2. 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
  3. 点击 Lighthouse 标签页。
  4. 确保类别列表中的效果复选框处于选中状态。
  5. 点击生成报告按钮。
  6. 查找适当调整图片大小审核的结果。

Lighthouse 中的“适当调整图片大小”审核失败。

Lighthouse 审核结果显示,此页面的两个图片都需要调整大小。

修复了 flower_logo.png

从页面顶部开始,修正徽标图片。

  • 在 DevTools 的“Elements”面板中检查 flower_logo.png

DevTools 的“Elements”面板

以下是 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

DevTools 的“Elements”面板

以下是 flower_photo.jpg 的 CSS:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw 会将 flower_photo.jpg 的 CSS 宽度设置为“浏览器宽度的 1/2”。(1vw 等于浏览器宽度的 1%)。

此图片的理想大小取决于其在哪种设备上观看,因此您应将其调整为适合大多数用户的大小。您可以查看分析数据,了解用户常用的屏幕分辨率:

屏幕分辨率的 Google Analytics 数据。

这些数据表明,此网站有 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 的“适当调整图片大小”审核。

… 但失败了!这是为什么?

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

您是否应将图片的尺寸缩小到更小?可能。不过,答案并不总是明确的。

这里的权衡取舍在于高分辨率设备上的图片质量和性能。用户检查图像的程度很容易高估,因此您可能应该减小图像,但确实有些用例的图片质量更重要。

好消息是,您可以使用自适应图片来提供多种图片尺寸,从而完全规避这种权衡。如需详细了解,请参阅“自适应图片”指南