预加载 WebP 或 AVIF 图片必须指定与最终渲染完全一致的确定 URL，href 需精确匹配 <picture> 中实际选中的 <source> 路径，确保 MIME 正确、无动态拼接、路径大小写及 query 参数统一，否则缓存不命中。
预加载 WebP 或 AVIF 图片必须指定单一确定 URL
浏览器不识别 type 属性，<link rel="preload"> 里的 href 必须是最终实际请求的完整路径。比如你想预加载 WebP 版本，就得写死 href="/assets/hero.webp"，不能写成 href="/assets/hero.jpg" 再靠 <picture> fallback 切换——那样预加载和真实 <img> 用的不是同一份资源，缓存不命中，等于白忙。
常见错误现象：Lighthouse 显示“关键图片未预加载”，但检查发现 <link> 已写，问题往往出在路径不一致——比如预加载的是 /images/logo.webp，而 <img srcset> 中匹配到的是 /images/logo.jpg?ver=2，query 参数不同、大小写不同、斜杠结尾与否，都会导致缓存分离。
- WebP 预加载优先级高于 JPG fallback，但必须确保该格式被实际使用（即
<img>的src或匹配的srcset项确实是 .webp） - AVIF 同理，
href="/assets/photo.avif"有效，但需确认服务端返回正确 MIME 类型image/avif，否则浏览器可能拒绝解码 - 不要在
href中拼接window.devicePixelRatio或用户代理判断逻辑——<link>是静态解析的，JS 变量不会执行
如何让 WebP 预加载与 <picture> fallback 协同工作
预加载本身不参与格式协商，它只下载一个明确 URL。所以你要做的是：让 <picture> 中「浏览器最终选中的那个 <source>」和预加载的 href 完全一致。
例如，若你按现代浏览器优先用 WebP：
立即学习“前端免费学习笔记（深入）”；
<picture> <source type="image/webp" srcset="/assets/hero.webp"> <img src="/assets/hero.jpg" alt="hero"> </picture>
那么预加载就必须写：
<link rel="preload" as="image" href="/assets/hero.webp">
而不是 /assets/hero.jpg，哪怕 fallback 存在。否则 Chrome 下载了 JPG 缓存，但渲染时走 WebP 分支，仍要再发一次请求。
- 构建工具（如 Vite）若对 WebP 文件自动加哈希，
href必须同步更新，硬编码路径会失效 - SSR 场景下，
<head>中的<link>必须由同一套路径生成逻辑产出，不能静态写死 - 验证是否生效：打开 DevTools → Network → 过滤
hero.webp，看是否在 HTML 解析早期就发起，且状态码为 200（不是 304）
AVIF 预加载要注意 MIME 和兼容性兜底
AVIF 压缩效率高，但 Safari 16.4+、Firefox 93+ 才稳定支持。预加载 AVIF 时，href 路径必须指向真实 AVIF 文件，且服务端响应头中 Content-Type 必须是 image/avif。浏览器不校验 type 属性，但若服务端返回错的 MIME，即使预加载成功，后续 <img> 渲染时也可能静默失败。
更麻烦的是：预加载了 AVIF，但用户浏览器不支持，<picture> 会 fallback 到 JPG，此时预加载资源完全浪费，还占用了首屏带宽。
- 建议只对明确支持 AVIF 的用户（可通过 UA 或
document.createElement('img').canPlayType('image/avif')检测）动态注入<link rel="preload"> - 不要把 AVIF 预加载和 WebP 混用在同一张图上——浏览器无法同时预加载两个格式，只能选其一
- CDN 若开启自动格式转换（如 Cloudflare 的 Polish），预加载 URL 必须与 CDN 实际返回格式一致，否则可能因重定向或内容变更导致缓存不复用
别指望 fetchpriority 改变格式选择逻辑
fetchpriority="high" 只影响请求调度顺序，不改变资源类型或协商行为。它能让 WebP 请求比普通 JS 更早发出，但不会让浏览器“更倾向选 AVIF”或“跳过 JPG fallback”。格式选择完全由 <picture> 结构、type 属性、srcset 匹配规则和浏览器能力决定。
真正容易被忽略的一点是：预加载的图片哪怕下载完成，也不会自动触发 <img> 渲染。它只是进内存缓存。如果 <img> 的 src 写错了，或者用了带 query 的不同 URL，浏览器根本不会复用那个预加载的 AVIF 文件——连缓存键都不一样。
