提供自适应图片

Katie Hempenius

向移动设备提供桌面设备大小的图片可能会使用超出所需 2-4 倍的流量。请遵循本页中的准则，向不同设备提供不同大小的图片，从而改善用户体验。

自适应图片和核心网页指标

提供自适应图片时，您的页面会评估用户设备的显示能力，并根据这些条件从一组最适合显示的候选图片中任选其一。这可以为您的用户节省数据，主要通过向屏幕较小的设备提供较小的图片。

加快图片加载速度也会给网页的 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 像素宽 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，请在您的服务器上安装 Thumbor。Cloudinary 会为您处理细节，无需设置服务器。

提供多个映像版本

当您指定多个映像版本时，浏览器会选择要使用的最佳版本：

<img> 标记的 src、srcset 和 sizes 会属性所有互动，以实现此最终结果。

“src”属性

src 属性使此代码适用于不支持 srcset 和 sizes 属性的浏览器。这些浏览器会回退到加载 src 属性中指定的资源。

“srcset”属性

srcset 属性是一个逗号分隔列表，其中包含图片文件名及其宽度或密度描述符。

本示例使用宽度描述符，该描述符会告知浏览器图片的宽度，因此无需下载图片即可了解。480w 是一个宽度描述符，用于告知浏览器 flower-small.jpg 的宽度为 480 像素。1080w 是一个宽度描述符，用于告知浏览器 flower-large.jpg 的宽度为 1080 像素。

额外提示：您无需了解密度描述符即可提供不同的图片大小。不过，如果您想了解密度描述符的工作原理，请查看分辨率切换 Codelab。密度描述符用于根据设备的像素密度提供不同的图片。

“sizes”属性

尺寸属性可告知浏览器图片显示时的宽度，但这并不影响图片的显示大小，因此您仍然需要使用 CSS。

浏览器会使用这些信息及其对用户设备的了解（包括设备尺寸和像素密度）确定要加载的图片。

如果浏览器无法识别“sizes”属性，则会回退到加载“src”属性指定的图片。（sizes 和 srcset 同时引入，因此每个浏览器要么同时支持这两个属性，要么均不支持。）

额外提示：如果您想打造个性化内容，还可以使用尺寸属性来指定多个槽尺寸。这适用于针对不同视口尺寸使用不同布局的网站。如需了解具体操作方法，请查看此多槽位代码示例。

（更多）额外积分

除了上面列出的全部额外赠金（图片很复杂！）之外，您还可以将这些概念用于艺术指导。艺术设计是指向不同视口提供外观完全不同的图片（而不是同一图片的不同版本）的做法。如需了解详情，请参阅艺术指导 Codelab。

验证

实现自适应图片后，您可以使用 Lighthouse 来确保不会错过任何图片。运行 Lighthouse 性能审核（Lighthouse > 选项 > 性能），并查看适当调整图片大小评估的结果。这些结果会列出您仍然需要调整大小的图片。