此页面由 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 面板，其中显示了一个瀑布，其中包含 JPEG 资源，在完成一些 JavaScript 后才开始下载。 — 如果不预加载，图片会在浏览器运行完脚本后开始加载。对于第一张图片，则无需延迟。

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

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

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

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

如果您为不同的屏幕密度提供了不同的背景图片，则可以使用 image-set 语法在 CSS 中指定这些图片。然后，浏览器可以根据屏幕的 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 的浏览器下载正确的源代码。不过，在这种情况下，它们无法从预加载中受益。

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