提供具有正确尺寸的图片

Katie Hempenius
Katie Hempenius
X

我们都遇到过这种情况：您忘记先缩小图片，然后再将其添加到页面中。该图片看起来不错，但它会浪费用户的数据流量，并降低网页性能。

识别尺寸不正确的图片

Lighthouse 可让您轻松识别尺寸不正确的图片。运行性能审核（Lighthouse > 选项 > 性能），然后查看适当调整图片大小审核的结果。该审核会列出所有需要调整大小的图片。

确定正确的图片尺寸

图片尺寸调整可能看似简单，实则复杂。因此，我们提供了两种方法：“好”和“更好”。这两种方法都可以提升性能，但“更好的”方法可能需要更长的时间来理解和实现。不过，它也会为您带来更大的性能提升。最适合您的选择是您认为可以轻松实现的选择。

关于 CSS 单位的简要说明

CSS 单位有两种类型，用于指定 HTML 元素（包括图片）的大小：

  • 绝对单位：无论在何种设备上，使用绝对单位设置样式的元素始终以相同的大小显示。有效绝对 CSS 单位示例：px、cm、mm、in。
  • 相对单位：使用相对单位设置样式的元素将根据指定的相对长度以不同的尺寸显示。有效相对 CSS 单位的示例：%、vw（1vw = 视口宽度的 1%）、em（1.5 em = 字号的 1.5 倍）。

“良好”方法

对于尺寸基于以下条件的图片…

  • 相对单位：将图片调整大小为适用于所有设备的尺寸。

您可能会发现，查看分析数据（例如 Google Analytics）以了解用户常用的显示尺寸会很有帮助。 或者，screensiz.es 提供了许多常见设备的显示屏信息。 - 绝对单位：调整图片大小，使其与显示大小一致。

您可以使用 DevTools 的“Elements”面板确定图片的显示尺寸。

开发者工具“元素”面板

“更优”方法

对于同时具有绝对尺寸和相对尺寸的图片，请使用 srcset 和 sizes 属性，以便针对不同的显示密度提供不同的图片。阅读自适应图片指南。

“显示密度”是指不同的显示屏具有不同的像素密度。在其他条件相同的情况下，高像素密度显示屏看起来比低像素密度显示屏更清晰。

因此，如果您希望用户无论使用何种像素密度的设备都能看到尽可能清晰的图片，则需要提供多个图片版本。

自适应图片技术可让您列出多个图片版本，并让设备选择最适合它的图片，从而实现这一目标。

适用于所有设备的图片对于较小的设备来说会不必要地过大。自适应图片技术（特别是 srcset 和 sizes）可让您指定多个图片版本，并让设备选择最适合自己的尺寸。

调整图片大小

无论您选择哪种方法，使用 ImageMagick 调整图片大小都会很有帮助。ImageMagick 是最常用的图片创建和编辑命令行工具。与使用基于 GUI 的图片编辑器相比，大多数人使用 CLI 调整图片大小的速度要快得多。

将图片大小调整为原始大小的 25%：

convert flower.jpg -resize 25% flower_small.jpg

缩放图片以适应“200 像素宽 x 100 像素高”：

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

如果您要调整许多图片的大小，可能会发现使用脚本或服务自动执行此过程会更方便。如需了解详情，请参阅“自适应图片”指南。

通过指定尺寸来避免布局偏移

虽然本指南讨论的是如何通过调整图片尺寸来减少不必要的下载字节数，但请务必注意，在布局中为图片预留正确的空间是最大限度降低网页Cumulative Layout Shift指标的另一个关键要素。在 HTML 中提供图片时，请务必使用适当的 width 和 height 属性，以便浏览器知道在布局中为图片分配多少空间：

<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">

如果没有这些属性或等效的 CSS 尺寸，浏览器在图片加载完成之前将无法得知图片会占用多少空间。这会导致文档中发生布局偏移，当用户开始阅读内容后，内容发生移动，这可能会让用户感到沮丧。这可能会导致用户在阅读时找不到之前看到的位置，或者“错过”预期的点击目标，最终在网页加载期间点击了其他并非有意点击的内容。

除了明确提供宽度和高度之外，您还可以对图片使用 CSS aspect-ratio 属性。这与 width 和 height 属性对元素大小的影响类似，因为容器会保持一致的宽高比。不过，不同之处在于，这可能会导致使用的宽高比与提供的图片不同，因此您可能需要使用 object-fit 设置，以确保图片在此显式 16/9 视图中不会失真：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

验证

调整完所有图片的大小后，请重新运行 Lighthouse，以验证您没有遗漏任何内容。