向移动设备提供桌面设备大小的图片所消耗的数据流量可能比向移动设备提供 2-4 倍多 所需的资源。请按照本页中的指南操作， 向不同设备提供不同尺寸的图片。
自适应图片和核心网页指标
投放自适应图片时，您的网页会评估 并从一组候选映像中 选择最适合展示广告的条件这可以为您的用户节省数据流量 主要方法是为屏幕较小的设备提供较小的图片。
加快图片加载速度也会影响网页加载速度， Largest Contentful Paint (LCP)。例如，如果您的网页 LCP 元素是图片， 响应即可缩短其资源加载时长。
缩短资源加载时长可缩短 LCP 图片的加载时间 网页的 LCP 得分。LCP 越低，您的网站加载速度越快 尤其是在更快地加载其最重要的内容（LCP 元素）时。 提供响应式图片还可以减少 这可提高网页的整体加载速度。
调整图片大小
sharp npm 软件包是两种最受欢迎的图片大小调整工具 和 ImageMagick CLI 工具。
Sharp 软件包是自动调整大小的理想选择（例如， 为网站上的所有视频生成多种尺寸的缩略图）。它 速度很快，并且可以与构建脚本和工具很好地集成。ImageMagick 的功能更丰富 非常方便一次性调整图片大小，因为它完全从命令行运行 行。
锐利
要将 Sharp 用作节点脚本，请在 项目，然后运行它来转换图片：
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 像素（宽）x 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”size="50vw"> |
<img> 标记的
src,
srcset,
和sizes
属性会全部交互来达到此最终结果。
“src”属性
src 属性使此代码适用于
支持 srcset 和 sizes
属性。这些浏览器会回退为加载
src 属性。
“srcset”属性
srcset 属性是以英文逗号分隔的图片文件名及其
宽度或密度描述符
本示例使用
宽度描述符，
用于指定图片的宽度，让浏览器无需下载
找出问题所在480w 是一个宽度描述符，用于告知浏览器
flower-small.jpg 的宽度为 480 像素。1080w 是一个宽度描述符，用于告知
flower-large.jpg 为 1080 像素宽的浏览器。
额外赠金： 您无需了解密度描述符即可提供不同尺寸的图片。 不过，如果您想了解密度描述符的工作原理，请查看 解决切换 Codelab。 密度描述符用于根据设备的 像素密度：
“尺寸”属性
尺寸属性用于告知浏览器图片在 但这并不影响图片的显示大小，因此您仍然需要 CSS。
浏览器会使用这些信息，以及它所了解的用户信息 设备（包括尺寸和像素密度），以确定 加载。
如果浏览器无法识别“sizes”属性，则回退到
加载“src”指定的图片。属性。（sizes 和 srcset
同时引入，因此每个浏览器都支持
属性，或两者都不用。）
额外赠金： 如果您想更考究，则还可以使用尺寸属性来指定 多个广告位尺寸它可适应针对不同网页使用不同布局的网站 不同的视口尺寸查看此多槽代码示例 了解如何执行此操作。
（更多）额外积分
除了已经列出的所有额外功劳（图片比较复杂！），您 也可以使用同样的概念 艺术指导。 艺术设计是指提供外观完全不同的图片 （而不是同一图片的不同版本）投放到不同的视口。您 可以在 Art Direction Codelab 中了解详情。
验证
实现自适应图片后，您可以使用 Lighthouse 以确保 没有错过任何图片。运行 Lighthouse 性能评估 （Lighthouse > 选项 > 性能），然后查看 审核适当调整映像大小。这些结果中列出了您仍需检查 调整大小。