我们都遇到过这种情况：您忘了在将图片添加到 页面。图片看起来没问题，但会浪费用户的数据和网页 性能
识别大小不正确的图片
Lighthouse 可让您轻松识别大小不正确的图片。运行 效果审核（Lighthouse > 选项 > 性能），并查找 适当调整图片大小审核的结果。审核报告中会列出 调整其大小
确定正确的图片大小
图片大小可能看似复杂。因此，我们提供了两个 方法：“良好”和“更好”。两者都能提高性能，但 “更好”可能需要较长的时间来理解和实现。不过， 还会为您提供更大的性能改进奖励。最适合 您即可轻松实施。
关于 CSS 单元的简要说明
用于指定 HTML 元素大小的 CSS 单元有两种： 包括图片：
- 绝对单位：使用绝对单位样式的元素将始终为 在任何设备上以相同的尺寸展示有效、 CSS 绝对单位：px、cm、mm、in
- 相对单位：使用相对单位设置样式的元素将在 不同的尺寸，具体取决于指定的相对长度。示例 有效的相对 CSS 单位：%、vw（1vw = 视口宽度的 1%） em（1.5 em = 字体大小的 1.5 倍）。
“良好”采用的方法
图片大小的依据是...
- 相对单位：将图片调整为适合所有设备的尺寸。
您可能会发现查看分析数据（例如 Google 来查看用户常用的显示尺寸。 或者，screensiz.es 提供有关许多常见设备的显示屏的信息。 - 绝对单位：根据图片显示尺寸调整图片大小。
开发者工具的 Elements 面板可用于确定图像的尺寸 显示位置。
《Better》接近
对于同时具有绝对尺寸和相对尺寸的图片，请使用 srcset
和sizes
属性为不同的显示密度提供不同的图像。
参阅自适应图片指南。
“显示密度”是指不同的显示屏具有不同的 像素密度。在其他条件相同的情况下，较高的像素密度 与低像素密度的显示屏相比，显示屏会更加清晰。
因此，如果您希望用户 不管屏幕的像素密度如何，都能体验到尽可能清晰的图片 其设备。
通过自适应图片技术，您可以 多个映像版本，并为设备选择适合的映像 最适合它。
适合所有设备的图片对于 小型设备自适应图片技术，特别是 srcset 和尺寸，可让您指定多个映像版本，并为设备选择 最适合它的尺寸
调整图片大小
无论您选择哪种方法，使用 ImageMagick，用于调整图片的大小。 ImageMagick 是最流行的 用于创建和编辑图片的命令行工具。大多数人都可以调整图片的大小 使用 CLI 时的速度比使用基于 GUI 的图片编辑器快得多。
将图片大小调整为原始图片大小的 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 以验证您是否没有 不会错过任何事情。