我们都遇到过这种情况：您忘记在将图片添加到页面之前缩小其尺寸。图片看起来不错，但它浪费了用户的数据并损害了页面性能。
识别尺寸不正确的图片
Lighthouse 可以轻松识别尺寸不正确的图片。运行性能审核（Lighthouse > Options > Performance）并查找 Properly size images 审核的结果。该审核列出了任何需要调整尺寸的图片。
确定正确的图片尺寸
图片尺寸调整可能具有迷惑性地复杂。因此，我们提供了两种方法：“良好”和“更好”。两者都将提高性能，但“更好”的方法可能需要更长的时间来理解和实施。但是，它也会为您带来更大的性能提升。最适合您的选择是您感觉最舒适的实施方式。
关于 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 是最流行的用于创建和编辑图片的命令行工具。大多数人使用 CLI 调整图片大小的速度比使用基于 GUI 的图片编辑器快得多。
将图片大小调整为原始尺寸的 25%
convert flower.jpg -resize 25% flower_small.jpg
缩放图片以适合“200px 宽 x 100px 高”的尺寸
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
如果您要调整许多图片的大小，您可能会发现使用脚本或服务来自动化该过程更方便。您可以在响应式图片指南中了解更多相关信息。
通过指定尺寸来避免布局偏移
虽然本指南讨论了图片尺寸以减少不必要的下载字节量，但重要的是要注意，在布局中为图片保留正确的空间是最大限度地减少页面累积布局偏移指标的另一个关键组成部分。在 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 以验证您没有遗漏任何内容。