向移动设备提供桌面设备大小的图片所使用的流量可能比所需流量多 2 到 4 倍。请遵循本页中的指南，针对不同的设备提供不同尺寸的图片，以提升用户体验。
自适应图片和 Core Web Vitals
当您提供自适应图片时，您的网页会评估用户设备的显示功能，并根据这些条件从一组最适合显示的候选图片中选择一张。这主要通过向屏幕较小的设备提供较小的图片来为用户节省流量。
图片加载速度变快的影响也会延伸到网页的 Largest Contentful Paint (LCP)。例如，如果网页的 LCP 元素是图片，则以响应式方式呈现该图片可以缩短其资源加载时长。
缩短资源加载时长有助于缩短 LCP 图片的加载时间，从而提高网页的 LCP 得分。LCP 越低，用户会认为您的网站加载速度越快，尤其是最重要的内容（LCP 元素）的加载速度越快。提供自适应图片还可以减少网页上其他资源的带宽争用，从而提高总体网页加载速度。
调整图片大小
其中两种最热门的图片大小调整工具是 sharp npm 软件包和 ImageMagick CLI 工具。
sharp 软件包非常适合自动调整图片大小（例如，为您网站上的所有视频生成多种尺寸的缩略图）。它速度很快，并且可以很好地与构建脚本和工具集成。ImageMagick 更适合一次性调整图片大小，因为它完全通过命令行运行。
尖锐
如需将 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
如需将图片调整大小以适应宽度为 300 像素、高度为 200 像素的空间，请运行以下命令：
# 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 像素。
额外提示：您无需了解密度描述符即可提供不同尺寸的图片。但是，如果您想了解密度描述符的工作原理，请查看分辨率切换 Codelab。密度描述符用于根据设备的像素密度提供不同的图片。
“sizes”属性
sizes 属性会告知浏览器图片在显示时的宽度，但不会影响图片的显示大小，因此您仍然需要使用 CSS 来实现这一点。
浏览器会根据这些信息以及它对用户设备的了解（包括尺寸和像素密度），确定要加载哪张图片。
如果浏览器不识别“sizes”属性，则会回退到加载“src”属性指定的图片。（sizes 和 srcset 同时推出，因此每款浏览器都支持这两个属性，或者都不支持。）
额外提示：如果您想玩出花样，还可以使用 sizes 属性指定多个槽大小。它可适应针对不同视口大小使用不同布局的网站。请参阅此多个槽代码示例，了解如何实现这一点。
（更多）额外积分
除了上面列出的所有额外创作贡献者之外（图片很复杂！），您还可以将这些概念应用于艺术指导。美术指导是指向不同视口提供完全不同外观的图片（而不是同一图片的不同版本）的做法。如需了解详情，请参阅“艺术指导”Codelab。
验证
实现响应式图片后，您可以使用 Lighthouse 确保自己没有遗漏任何图片。运行 Lighthouse 性能审核（Lighthouse > 选项 > 性能），然后查看图片尺寸适当审核的结果。这些结果会列出您仍需要调整大小的图片。