预加载自适应图片

Barry Pollard

Yoav Weiss

发布时间：2019 年 9 月 30 日；最后更新时间：2026 年 7 月 10 日

注意：由于 Glitch 已停止托管，此页面上的一个或多个演示已无法正常运行。

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

自适应图片概览

Browser Support

• 73
• 79
• 78
• 17.2

Source

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

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

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

预加载概览

Browser Support

• 50
• 79
• 85
• 11.1

Source

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

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

重要提示：预加载的图片可能具有高优先级，因此应包含 fetchpriority="high" 属性，否则预加载将获得 as 属性的默认优先级。对于图片，此属性默认设置为 low，以便浏览器优先处理会阻止渲染的内容，而不是图片。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。

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" fetchpriority="high">

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

警告：HTTP 标头预加载可能不支持自适应图片，因为视口仅在文档创建时定义。这也意味着，它们不能用于 103 Early Hints 中的早期预加载。

某些浏览器（例如 Chrome）会在文档定义完成后以及处理完第一段 HTML 后，处理具有这些属性的预加载。此功能已作为 HTML 标准提案提交。不过，如果稍后在文档中重新定义视口（例如，在较晚的 <meta name="viewport"> 元素中），这仍然存在风险，因为错误的自适应图片可能已经开始加载。

为避免出现任何问题，建议您对自适应图片使用 <link rel="preload" href="..."> 元素，而不是 Link: <...>; rel="preload" HTTP 响应标头。

使用场景

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

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

假设您要以幻灯片形式动态加载主打图片，并且知道哪张图片会先显示。在这种情况下，您可能希望尽快显示该图片，而不是等待幻灯片脚本加载该图片。

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

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

如果不预加载，图片会在浏览器运行完脚本后开始加载。对于第一张图片，这种延迟是不必要的。

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

预加载第一张图片可让其与脚本同时开始加载。

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

注意：另一种避免图片加载延迟的方法是使用基于标记的轮播界面，并让浏览器的预加载程序提取所需资源。不过，这种方法并非总是可行，例如，如果您要重复使用不基于标记的现有组件，则无法采用这种方法。

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

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

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

注意：此语法忽略了此功能在 Chromium 和基于 WebKit 的浏览器中对供应商前缀的需求。如果您打算使用此功能，不妨考虑使用 Autoprefixer（可作为在线工具使用）来自动解决该问题。

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

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

在此示例中，图片下载在 CSS 完全下载后才开始，导致图片显示出现不必要的延迟。

自适应图片预加载功能可让您更快地加载这些图片。

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

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

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

在这里，图片和 CSS 同时开始下载，从而使图片加载速度更快。

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

理论上，预加载自适应图片可以加快其加载速度，但实际效果如何？

为了回答这个问题，我创建了演示 PWA 商店的两个副本： 一个不预加载图片， 另一个预加载部分图片。 由于该网站使用 JavaScript 延迟加载图片，因此预加载初始视口中显示的图片可能会带来好处。

不预加载和图片预加载的结果如下：

• 开始渲染保持不变。
• Speed Index 略有改善（273 毫秒，因为图片到达速度更快，不会占用大量像素区域）。
• Last Painted Hero 显著缩短了 1.2 秒。

预加载图片可以显著加快图片加载速度，从而大幅提升用户体验。

预装和<picture>

Web 性能工作组正在讨论为 srcset 和 sizes 添加预加载等效项，但不讨论 <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> 元素的图片来源选择逻辑会按顺序检查 <source> 元素的 media 属性，找到第一个匹配的属性，然后使用附加的资源。

由于自适应预加载没有“顺序”或“首次匹配”的概念，因此您需要将断点转换为如下所示的内容：

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

预装和type

<picture> 元素还支持匹配第一个 type，以便您提供不同的图片格式，让浏览器选择它支持的第一种图片格式。

预加载仅部分支持此用例：浏览器应仅下载受支持类型的预加载内容。因此，您可以在预加载中添加此属性，以防止浏览器预加载不受支持的 MIME 类型：

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

不过，与 <picture> 不同，它不会在找到第一个受支持的类型时停止。因此，如果针对多种类型添加了多个预加载，则所有图片都会预加载：

不建议的做法 - 预加载多种类型：

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

正确做法 - 预加载最偏好的类型：

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

预加载最新格式（在本例中为 AVIF）是一种渐进增强，支持该类型的浏览器将受益，而其他浏览器则不会从预加载中受益。

对于在 HTML 中可以快速发现图片的网站，我们建议避免预加载，而是让预加载扫描器从 <picture> 和 <source> 元素中提取图片。无论如何，这都是一种最佳实践，尤其是在使用提取优先级来帮助确定适当图片的优先级时，因为这样可以根据浏览器支持情况预加载确切的图片。此外，它还消除了在图片或网页发生变化时，预加载内容与主标记不一致的风险。

对 Largest Contentful Paint (LCP) 的影响

由于图片可能是 Largest Contentful Paint (LCP) 候选对象，因此预加载图片可以提高网站的 LCP。

无论您预加载的图片是否具有自适应性，当图片资源在初始标记载荷中不可检测时，预加载效果最佳。 此外，与从服务器发送完整标记的网站相比，在客户端呈现标记的网站上，LCP 提升幅度更大。