我们都经历过这样的情况：在将图片添加到网页之前，您忘了将其缩小。图片看起来没问题，但它在浪费用户的数据并影响页面性能。
识别尺寸不正确的图片
Lighthouse 可以轻松识别大小不正确的图片。运行性能审核（依次选择 Lighthouse > 选项 > 性能），并查看适当大小的图片审核的结果。审核会列出需要调整尺寸的所有图片。
确定正确的图片大小
调整图片大小看似十分复杂。因此，我们提出了两种方法：“良好”和“更好”。两者都可以提升性能，但“更好”的方法可能需要更长时间才能理解和实现。不过，这也会使性能得到更大的提升。对您来说，选择可以放心实现的方式是最佳选择。
CSS 单元简介
有两种类型的 CSS 单元可用于指定 HTML 元素（包括图片）的大小：
- 绝对单位：使用绝对单位设置样式的元素将始终以相同的大小显示，无论他们使用的是哪种设备。有效的绝对 CSS 单位示例：px、cm、mm、in。
- 相对单位：使用相对单位设置样式的元素将以不同的大小显示，具体取决于指定的相对长度。有效的相对 CSS 单位示例：%、vw（1vw = 视口宽度的 1%）、em（1.5 em = 字体大小的 1.5 倍）。
“正确”方法
对于大小基于...的图片
- 相对单位：将图片大小调整为适用于所有设备的尺寸。
您可能会发现，查看您的分析数据（例如 Google Analytics [分析]）以了解用户常用的显示尺寸很有帮助。此外，screensiz.es 还提供许多常见设备显示屏的相关信息。- 绝对单位：调整图片的大小，使其与显示图片时相符。
开发者工具的“元素”面板可用于确定图片以何种尺寸显示。
“更好”的方法
对于同时具有绝对尺寸和相对尺寸的图片，请使用 srcset 和 sizes 属性针对不同的显示密度提供不同的图片。阅读自适应图片指南。
“显示密度”是指不同的显示屏具有不同的像素密度。在所有其他条件相同的情况下，高像素密度显示屏看起来比低像素密度显示屏更清晰。
因此，无论设备的像素密度是多少，如果您想让用户都能获得尽可能清晰的图片，必须使用多个图片版本。
通过自适应图片技术，您可以列出多个图片版本，并让设备选择最适合自己的图片。
对于小型设备而言，可在所有设备上运行的映像会变得过大。通过自适应图片技术（具体而言，即 srcset 和 sizes），您可以指定多个图片版本，并让设备选择最适合自己的尺寸。
调整图片大小
无论您选择哪种方法，都可能发现使用 ImageMagick 来调整图片大小。ImageMagick 是用于创建和修改图片的命令行工具。与基于 GUI 的图片编辑器相比，使用 CLI 时，大多数人可以更快地调整图片大小。
将图片大小调整为原始大小的 25%：
convert flower.jpg -resize 25% flower_small.jpg
将图片缩放到“宽 200 像素，高 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 以验证是否未遗漏任何内容。