此页面由 Cloud Translation API 翻译。

预加载自适应图片

Barry Pollard

Yoav Weiss

您可以预加载自适应图片，这样一来，浏览器便可在渲染 img 标记之前从 srcset 中识别出正确的图片，从而显著加快图片加载速度。

自适应图片概览

Browser Support

Source

假设您在宽度为 300 像素的屏幕上浏览网页，而该网页请求的图片宽度为 1, 500 像素。该网页浪费了您大量移动数据流量，因为您的屏幕无法处理所有这些额外的分辨率。理想情况下，浏览器会提取比屏幕尺寸略宽（例如 325 像素）的图片版本。这样可确保获得高分辨率图片，同时不会浪费数据，并可加快图片加载速度。

借助自适应图片，浏览器可以为不同的设备提取不同的图片资源。如果您不使用图片 CDN，请为每张图片保存多个尺寸，并在 srcset 属性中指定这些尺寸。w 值会告知浏览器每个版本的宽度，以便浏览器为任何设备选择合适的版本：

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

预加载概览

Browser Support

Source

预加载可让您告知浏览器您想要尽快加载的关键资源，以便在 HTML 中发现这些资源之前就进行加载。这对于不易发现的资源（例如样式表中包含的字体、背景图片或从脚本加载的资源）尤其有用。

<link rel="preload" as="image" href="important.png">

`imagesrcset`和`imagesizes`

<link> 元素使用 imagesrcset 和 imagesizes 属性来预加载自适应图片。将它们与 <link rel="preload"> 一起使用，并采用 <img> 元素中使用的 srcset 和 sizes 语法。

例如，如果您想预加载使用以下代码指定的自适应图片：

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

为此，您可以将以下内容添加到 HTML 的 <head> 中：

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

这会使用与 srcset 和 sizes 相同的资源选择逻辑来发起请求。

使用场景

以下是预加载自适应图片的一些应用场景。

预加载动态注入的自适应图片

假设您要动态加载首页图片作为幻灯片的一部分，并且知道哪张图片将首先显示。在这种情况下，您可能希望尽快显示该图片，而不是等待幻灯片脚本加载该图片。

您可以在具有动态加载的图片库的网站上检查此问题：

在新标签页中打开此幻灯片演示。
按 Control+Shift+J（在 Mac 上，按 Command+Option+J）打开开发者工具。
点击网络标签页。
在节流下拉列表中，选择快速 3G。
取消选中 Disable cache（停用缓存）复选框。
重新加载页面。

Chrome 开发者工具的“网络”面板，其中显示了一个瀑布图，其中包含一个仅在某些 JavaScript 之后才开始下载的 JPEG 资源。 — 如果不进行预加载，浏览器在完成脚本运行后才会开始加载图片。对于第一张图片，这种延迟是不必要的。

在此处使用 preload 可让图片提前开始加载，以便在浏览器需要显示图片时，图片已准备就绪。

Chrome 开发者工具的“网络”面板：显示了一个瀑布图，其中一个 JPEG 资源与一些 JavaScript 并行下载。 — 预加载第一张图片可让其与脚本同时开始加载。

如需了解预加载带来的差异，请按照第一个示例中的步骤检查同一动态加载的图片库，但预加载第一张图片。

使用 image-set 预加载背景图片

如果您为不同的屏幕密度提供了不同的背景图片，则可以在 CSS 中使用 image-set 语法指定这些图片。然后，浏览器可以根据屏幕的 DPR 选择要显示哪个。

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS 背景图片的问题在于，浏览器只有在下载并处理完网页 <head> 中的所有 CSS 后才会发现它们。

您可以在具有自适应背景图片的示例网站上检查此问题。

Chrome 开发者工具“网络”面板，其中显示了一个瀑布图，其中包含一个仅在下载某些 CSS 后才开始下载的 JPEG 资源。 — 在此示例中，图片下载要等到 CSS 完全下载后才开始，这会导致图片显示出现不必要的延迟。

借助自适应图片预加载，您可以更快地加载这些图片。

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

省略 href 属性可确保不支持 <link> 元素上的 imagesrcset 但支持 CSS 中的 image-set 的浏览器下载正确的来源。不过，在这种情况下，他们将无法从预加载中受益。

您可以在自适应背景预加载演示中查看上一个示例在预加载自适应背景图片时的行为。