我们都有过这样的经历：在将图片添加到网页之前，忘记缩小图片。图片看起来不错，但会浪费用户的数据流量并影响网页性能。
识别尺寸不正确的图片
借助 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 像素宽 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 以验证您没有遗漏任何内容。