向移动设备提供桌面尺寸的图片可能会比实际需要的流量多出 2–4 倍。请按照此页面上的指南操作，通过向不同设备提供不同尺寸的图片来改善用户体验。
自适应图片和 Core Web Vitals
当您提供自适应图片时，您的页面会评估用户设备的显示能力，并根据这些标准选择一组最适合显示的候选图片之一。这可以为您的用户节省数据，主要是通过向屏幕较小的设备提供较小的图片。
更快的图片加载效果还可以扩展到您页面的最大内容渲染时间 (LCP)。例如，如果页面的LCP 元素是一张图片，则以自适应方式提供该图片可以缩短其资源加载时长。
更短的资源加载时长会缩短 LCP 图片的加载时间，从而提高页面的 LCP 分数。较低的 LCP 意味着用户会认为您的网站加载速度更快，尤其是加载其最重要的内容（LCP 元素）的速度更快。提供自适应图片还可以减少页面上其他资源的带宽争用，从而提高页面整体加载速度。
调整图片大小
最流行的两种图片大小调整工具是 sharp npm 软件包和 ImageMagick CLI 工具。
sharp 软件包是自动化调整图片大小的理想选择（例如，为网站上的所有视频生成多种尺寸的缩略图）。它速度快，并且可以很好地与构建脚本和工具集成。ImageMagick 对于一次性调整图片大小更为方便，因为它完全从命令行运行。
sharp
要将 sharp 用作 Node 脚本，请将此代码另存为项目中的单独脚本，然后运行它以转换您的图片
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
要将图片大小调整为其原始大小的 33%，请在终端中运行以下命令
convert -resize 33% flower.jpg flower-small.jpg
要调整图片大小以适应 300px 宽 x 200px 高的空间，请运行以下命令
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
应该创建多少个图片版本？
这个问题没有唯一的“正确”答案。但是，通常提供 3-5 种不同尺寸的图片。提供更多图片尺寸对性能更有利，但会占用服务器上更多空间，并且需要您编写稍微多一些 HTML。
其他选项
还值得了解一下 Thumbor（开源）和 Cloudinary 等图片服务。这两种服务都是创建自适应图片的简单方法，还可以按需提供图片处理功能。要设置 Thumbor，请将其安装在您的服务器上。Cloudinary 会为您处理详细信息，并且无需服务器设置。
提供多个图片版本
当您指定多个图片版本时，浏览器会选择最佳版本使用
| 之前 | 之后 |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> |
<img> 标记的 src、srcset 和 sizes 属性共同作用以实现此最终结果。
“src”属性
src 属性使此代码适用于不支持 srcset 和 sizes 属性的浏览器。这些浏览器会回退到加载 src 属性中指定的资源。
“srcset”属性
srcset 属性是以逗号分隔的图片文件名及其宽度或密度描述符列表。
此示例使用宽度描述符，它告诉浏览器图片的宽度，这样浏览器就不必下载图片来查找宽度。480w 是一个宽度描述符，它告诉浏览器 flower-small.jpg 的宽度为 480 像素。1080w 是一个宽度描述符，它告诉浏览器 flower-large.jpg 的宽度为 1080 像素。
额外加分项：您无需了解密度描述符即可提供不同尺寸的图片。但是，如果您对密度描述符的工作原理感到好奇，请查看分辨率切换代码实验室。密度描述符用于根据设备的 像素密度 提供不同的图片。
“sizes”属性
sizes 属性告诉浏览器图片在显示时的宽度，但这不会影响图片的显示尺寸，因此您仍然需要 CSS 来实现这一点。
浏览器使用此信息以及它对用户设备的了解（包括其尺寸和像素密度）来确定要加载的图片。
如果浏览器无法识别“sizes”属性，它会回退到加载“src”属性指定的图片。（sizes 和 srcset 是同时引入的，因此每个浏览器要么同时支持这两个属性，要么都不支持。）
额外加分项：如果您想更高级一些，您还可以使用 sizes 属性来指定多个槽尺寸。这适用于为不同视口尺寸使用不同布局的网站。查看此多个槽代码示例，了解如何执行此操作。
（更多）额外加分项
除了已列出的所有额外加分项（图片很复杂！）之外，您还可以将这些相同的概念用于美术指导。美术指导是指为不同的视口提供完全不同外观的图片（而不是同一图片的不同版本）的做法。您可以在美术指导代码实验室中了解更多信息。
验证
在您实现自适应图片后，您可以使用 Lighthouse 来确保您没有遗漏任何图片。运行 Lighthouse 性能审核（Lighthouse > 选项 > 性能），并查找图片尺寸不当审核的结果。这些结果列出了您仍需要调整大小的图片。