预加载<picture>元素时浏览器加载两张图片的问题排查

使用<picture>元素适配不同设备宽度，尝试通过<link rel="preload">预加载符合媒体查询规则的单张图片，但Chrome开发者工具网络面板显示加载了两张图片（/big.webp和/mobile.webp），请问理解上存在什么误区？

代码示例 #

本地代码 #

<link rel="preload" as="image" imagesrcset="/big.webp 885w, /mobile.webp 420w, /fallback.jpg 885w" imagesizes="(min-width: 421px) 885px, (max-width: 420px) 420px">

<picture>
    <source srcset="/big.webp" type="image/webp" media="(min-width: 421px)">
    <source srcset="/mobile.webp" type="image/webp" media="(max-width: 420px)">
    <img src="/fallback.jpg" fetchpriority="high" width="885" height="570" class="img-fluid" alt="example">
</picture>

在线演示代码 #

<link rel="preload" as="image" imagesrcset="https://via.placeholder.com/1200x800 885w, https://via.placeholder.com/1200x800/ff0000 420w, https://via.placeholder.com/1200x800/00ff00 885w" imagesizes="(min-width: 421px) 885px, (max-width: 420px) 420px">

<picture>
  <source srcset="https://via.placeholder.com/1200x800" type="image/webp" media="(min-width: 421px)">
  <source srcset="https://via.placeholder.com/1200x800/ff0000" type="image/webp" media="(max-width: 420px)">
  <img src="https://via.placeholder.com/1200x800/00ff00" fetchpriority="high" width="885" height="570" class="img-fluid" alt="example">
</picture>

你遇到的核心问题是预加载资源与<picture>未关联，且两者的资源选择逻辑不匹配，具体误区如下：

• 预加载资源未与<picture>绑定
  <link rel="preload">仅负责提前下载资源，但浏览器无法识别该资源是为后续<picture>准备的。当<picture>解析时，会根据自身的媒体查询规则重新发起请求，即便预加载了相同URL的资源，也可能因上下文差异无法复用，导致重复加载。

• 预加载的选择逻辑与<picture>不匹配
  <picture>通过media属性直接按断点区分图片：视口宽于420px用big.webp，反之用mobile.webp。但预加载的imagesrcset/imagesizes是通过「显示尺寸+图片宽度描述」的逻辑选择资源，这种计算逻辑和<picture>的断点判断存在偏差，可能导致预加载的资源和<picture>最终选择的资源不一致，从而触发两次请求。

• 未适配图片格式的优先级
  <picture>优先选择WebP格式的资源，但你的预加载imagesrcset未区分格式，若预加载了JPG fallback图，<picture>匹配到WebP时会重新加载；即便预加载了WebP，若和<picture>媒体查询对应的WebP资源不匹配，也会重复加载。

修正方案 #

要让预加载和<picture>协同工作，需确保两者逻辑完全对齐：

<!-- 预加载：匹配picture的媒体查询逻辑，指定WebP格式 -->
<link rel="preload" as="image" imagesrcset="/big.webp 885w, /mobile.webp 420w" imagesizes="(min-width: 421px) 885px, 100vw" type="image/webp">

<picture>
    <source srcset="/big.webp" type="image/webp" media="(min-width: 421px)">
    <source srcset="/mobile.webp" type="image/webp" media="(max-width: 420px)">
    <img src="/fallback.jpg" fetchpriority="high" width="885" height="570" class="img-fluid" alt="example">
</picture>

这里imagesizes用(min-width:421px) 885px, 100vw与<picture>的media逻辑对齐，type="image/webp"确保预加载的是WebP格式，和<picture>的<source>完全匹配，浏览器就能复用预加载资源，避免重复请求。

内容的提问来源于Stack Exchange，提问作者astralmaster