此页面由 Cloud Translation API 翻译。

预加载自适应图片

Barry Pollard

Yoav Weiss

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

自适应图片概览

浏览器支持

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

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

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

预加载概览

浏览器支持

来源

您可以通过预加载告知浏览器您想要尽快加载的关键资源，在浏览器在 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）打开 DevTools。
点击网络标签页。
在节流下拉列表中，选择 Fast 3G。
停用停用缓存复选框。
重新加载页面。

Chrome DevTools Network 面板，显示了在 JavaScript 执行完毕后才开始下载 JPEG 资源的瀑布图。 — 如果不预加载，图片会在浏览器运行完脚本后开始加载。对于第一张图片，则无需延迟。

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

Chrome DevTools 的 Network 面板，显示了与一些 JavaScript 并行下载 JPEG 资源的瀑布图。 — 预加载第一张图片可让其与脚本同时开始加载。

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

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

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

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

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

您可以在包含响应式背景图片的示例网站上检查此问题。

Chrome DevTools 的 Network 面板，显示了一个瀑布图，其中 JPEG 资源仅在下载一些 CSS 后才开始下载。 — 在此示例中，系统会等到 CSS 完全下载后才开始下载图片，导致图片显示出现不必要的延迟。

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

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

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

您可以在响应式背景预加载演示版中检查上例在使用预加载的响应式背景图片时的行为。