link rel="preload"不支持srcset或通配符，预加载多规格图片必须为每个关键规格（如@1x、@2x、WebP/JPEG）单独声明一条link，且href需指向真实存在的文件路径，sizes属性在preload中无效会被忽略。
用 link rel="preload" 预加载多规格图片必须手动写多个声明
浏览器不支持在单个 <link> 里用 srcset 或通配符自动匹配规格，你得为每张要预加载的图片、每个关键规格（如 @1x、@2x、WebP/JPEG）显式声明一条 <link rel="preload">。
常见错误是以为写一个 href="/img/hero.jpg" 就能覆盖所有响应式变体——实际只会加载那一份；或者误用 sizes 属性，但它在 preload 中无效，会被忽略。
- 必须确保每条
href指向真实存在的文件路径，比如/assets/hero.webp和/assets/hero@2x.jpg是两个独立资源 - 优先级需单独控制：
fetchpriority="high"只作用于当前这条请求，不能“批量提升” - 如果某规格只在特定设备上使用（如
@2x仅用于window.devicePixelRatio > 1），那它不适合放<head>静态预加载，应改用 JS 动态判断
用 new Image() 按设备条件动态预加载多规格图
当你要根据 window.devicePixelRatio、screen.width 或 Accept: image/webp 响应头决定加载哪一版时，new Image() 是唯一可靠方式。静态 <link> 无法读取运行时环境。
关键点在于：先获取设备信息或探测能力，再构造对应 URL，最后创建 Image 实例。不要把所有规格都一股脑预加载——既浪费带宽，又可能挤占关键资源请求队列。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- WebP 探测不能只靠 UA 字符串，推荐用
document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') > -1判断 - 赋值
src前务必绑定onload/onerror，否则缓存命中时事件会直接同步触发，回调丢失 - 并发控制很重要：一次预加载超过 4 张不同规格图，容易触发浏览器并发限制（通常 6~8 个），建议用
Promise.allSettled+ 限流队列
srcset 和 sizes 不等于预加载，别混用
很多人把 <img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x" sizes="100vw"> 当成“已预加载”，其实不是。浏览器只会在该 <img> 进入布局计算阶段时，才根据当前上下文选出最匹配的源并发起请求——这和首屏前就进缓存的预加载有本质区别。
如果你的目标是让轮播图第二张图在用户还没点“下一张”前就准备好，那 srcset 自身毫无帮助；必须配合 new Image() 或提前 <link rel="preload"> 声明具体 URL。
-
loading="eager"只影响初始加载时机，不改变srcset的选择逻辑 - 服务端无法通过
srcset知道客户端最终选了哪个规格，所以 CDN 缓存、日志统计都得按完整 URL 区分 - 若用 WebP fallback（如
srcset="a.webp 1x, a.jpg 1x"），预加载也得分别声明两条<link>，且注意浏览器对 WebP 的支持度差异
WebP 预加载必须带 fallback，且路径要严格一致
Chrome 和 Edge 支持 WebP，但 Safari 直到 16.4 才完全支持动画 WebP，旧版 iOS Safari 仍可能回退到 JPEG。如果你用 <link rel="preload" as="image" href="a.webp"> 却没准备 a.jpg，而页面里 <img> 的 srcset 又依赖 fallback，就会出现「预加载了但用不上」的情况。
真正起作用的前提是：预加载的 URL 和最终 <img> 渲染时实际请求的 URL 完全一致（包括查询参数）。哪怕只是 a.webp?v=2 和 a.webp?v=3，缓存也不命中。
- fallback 策略建议在构建时生成：比如 Webpack 插件自动为每个
.webp输出对应.jpg，并在 HTML 模板中双写<link> - 不要在
href里拼接时间戳或哈希，除非你确保<img>的src或srcset也用了完全相同的版本标识 - CDN 缓存键需包含
Accept头，否则 WebP 请求可能被缓存为 JPEG 响应，导致格式错乱
