预加载自适应图片

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

自适应图片概览

浏览器支持

  • Chrome:73。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:78。 <ph type="x-smartling-placeholder">
  • Safari:17.2. <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="…">

预加载概览

浏览器支持

  • Chrome:50。 <ph type="x-smartling-placeholder">
  • 边缘:≤ 79。 <ph type="x-smartling-placeholder">
  • Firefox:85。 <ph type="x-smartling-placeholder">
  • Safari:11.1. <ph type="x-smartling-placeholder">

来源

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

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

imagesrcsetimagesizes

<link> 元素使用 imagesrcsetimagesizes 属性 预加载自适应图片。搭配使用 <link rel="preload">,其中 srcsetsizes 语法在 <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">

这会使用 使用 srcsetsizes

使用场景

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

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

假设您正在将主打图片动态加载为幻灯片的一部分, 您知道首先显示哪张图片在这种情况下,您可能需要 显示该图片,而不是等到幻灯片演示脚本 加载它。

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

  1. 打开此幻灯片演示演示 打开新的标签页
  2. Control+Shift+J(在 Mac 上,按 Command+Option+J)打开开发者工具。
  3. 点击网络标签页。
  4. Throttling 下拉列表中,选择 Fast 3G
  5. 取消选中停用缓存复选框。
  6. 重新加载页面。
。 <ph type="x-smartling-placeholder">
</ph> Chrome DevTools 的 Network 面板,其中显示了一个瀑布,其中包含 JPEG 资源,在完成一些 JavaScript 后才开始下载。
如果不预加载,则图片会在浏览器运行完脚本后开始加载。对于第一张图片,没有必要延迟。

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

<ph type="x-smartling-placeholder">
</ph> 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 之后。

您可以在具有 自适应背景图片

<ph type="x-smartling-placeholder">
</ph> 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 下载正确的来源。不过,这些预加载不会为他们带来任何好处 这种情况。

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

<ph type="x-smartling-placeholder">
</ph> Chrome DevTools Network 面板,其中显示了一个瀑布,其中包含一个 JPEG 资源正以并行形式下载到某些 CSS。
此时,图片和 CSS 会同时开始下载,从而加快图片加载速度。

预加载自适应图片的实际效果

从理论上讲,预加载自适应图片可以提高加载速度,但这有什么好处 该怎么办?

为了回答这个问题,我为一家演示版 PWA 商店创建了两个副本: 不会预加载图片的应用 以及预加载了其中一些组件的应用。 由于网站使用 JavaScript 延迟加载图片 预加载初始视口中显示的视口。

此查询产生了以下结果: 无预加载 对于图片预加载

。 <ph type="x-smartling-placeholder">
</ph> 显示预加载图片的 WebPageTest 幻灯影片比较显示的显示速度大约提高了 1.5 秒。
预加载后,图片的加载速度显著提升,从而极大地改善了用户体验。

预加载和 <picture>

网络性能工作组正在讨论为 srcsetsizes,但不包括 <picture> 元素,用于处理“艺术指导” 应用场景。

预加载 <picture> 仍有许多技术问题需要解决, 但在此期间,您可以尝试以下临时解决方法:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> 元素的图片来源选择逻辑会处理 media 属性(按顺序查找 <source>)中的第一个 匹配并使用附加的资源。

因为自适应预加载不具有“顺序”的概念也就是“第一个匹配” 需要将断点转换为如下所示的内容:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

预加载和 type

<picture> 元素还支持与第一个 type 匹配,让您可以 提供不同的图片格式,以便浏览器可以选择第一种图片格式 支持的存储类型预加载不支持此用例。

对于使用类型匹配的网站,我们建议不要进行预加载,而改用 预加载扫描器会从 <picture><source> 元素。无论如何,这也是最佳做法 尤其是在使用提取优先级帮助您确定优先级时 相应图片。

对 Largest Contentful Paint (LCP) 的影响

由于图片可以是 Largest Contentful Paint (LCP) 候选项, 预加载这些代码可以提高您网站的 LCP。

无论您预加载的图片是否为自适应图片,预加载都可以 当图片资源在初始标记载荷中不可发现时,效果最佳。 同时,对在客户端上呈现标记的网站还有助于改进 LCP 与从服务器发送完整标记的网站相比。