此页面由 Cloud Translation API 翻译。

预加载自适应图片

Barry Pollard

Yoav Weiss

您可以预加载自适应图片，以便系统加载您的图片大大加快了速度从 srcset 获取，然后再呈现 img 标记。

自适应图片概览

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

假设您在宽度为 300 像素的屏幕上浏览网页，而该网页用于请求宽度为 1500 像素的图片。该网页浪费了你的大量移动设备因为你的屏幕在这么高的分辨率下无法执行任何操作理想情况下，浏览器会抓取一个版本大于您的屏幕尺寸，例如 325 像素。这样可以确保高分辨率图片，而不会浪费数据，并可让图片更快地加载。

自适应图片让浏览器针对不同的设备提取不同的图片资源。如果您使用图片 CDN，为每个 CDN 保存多个维度并在 srcset 属性中进行指定。w 值用于告知浏览器显示每个版本的宽度，以便针对浏览器选择适合的版本任何设备：

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

预加载概览

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

借助预加载，您可以让浏览器您需要尽快加载的关键资源。这对于不容易使用例如，样式表、背景图片或从脚本加载的资源

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

`imagesrcset`和`imagesizes`

<link> 元素使用 imagesrcset 和 imagesizes 属性预加载自适应图片。搭配使用 <link rel="preload">，其中 srcset 和 sizes 语法在 <img> 元素。

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

 <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）打开开发者工具。
点击网络标签页。
在 Throttling 下拉列表中，选择 Fast 3G。
取消选中停用缓存复选框。
重新加载页面。

。 <ph type="x-smartling-placeholder">

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，但支持中的 image-set CSS 下载正确的来源。不过，这些预加载不会为他们带来任何好处这种情况。

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