imagesizes 必须与 imagesrcset 配合使用，单独声明无效；其语法需严格匹配 img 的 sizes 规则，且含该属性的 preload link 必须置于 head 开头、href 为静态绝对路径，否则预加载失败。
imagesizes 必须和 imagesrcset 一起用，单独写无效
浏览器只在 rel="preload" 且同时声明 imagesrcset 时才解析 imagesizes。如果只写 imagesizes 没配 imagesrcset，这个属性会被完全忽略——Network 面板里看不到对应请求，控制台也不报错，就是静默失效。
它不是用来“提示尺寸”的辅助字段，而是参与资源选择逻辑的计算因子，必须和 imagesrcset 构成完整响应式预加载语句：
-
imagesrcset提供候选图片列表（如"hero-400w.jpg 400w, hero-800w.jpg 800w"） -
imagesizes提供布局上下文（如"(max-width: 768px) 100vw, 800px"），告诉浏览器“这张图在不同断点下实际占多宽” - 两者合起来，浏览器才能模拟
<img>的资源选择过程，提前拉取最匹配的那张
imagesizes 语法必须严格匹配 img 的 sizes 写法
imagesizes 不是任意字符串，它复用的是 <img> 的 sizes 解析引擎。写错格式会导致预加载失败或选错资源。
常见错误包括：
- 漏括号：
"max-width: 768px 100vw"❌（必须是"(max-width: 768px) 100vw"） - 单位缺失：
"(max-width: 768px) 100"❌（必须带vw、px等单位） - 逗号后多空格：
"(max-width: 768px) 100vw , 800px"❌（逗号后不能有空格，应为"(max-width: 768px) 100vw,800px"） - 用了不支持的媒体特性，比如
hover或prefers-color-scheme—— 这些在预加载阶段不生效
预加载响应式图片必须写在 最前面，且 href 不能动态
和普通 rel="preload" 一样，含 imagesrcset/imagesizes 的 <link> 必须出现在 开头、任何 <script></script> 或 <link rel="stylesheet"> 之前。否则 HTML parser 不会触发预加载扫描器，请求压根不发。
另外，href 值必须是静态路径。以下写法都会导致预加载失效：
-
href="/img/${name}.jpg"（模板变量，服务端未渲染） -
href="./hero.jpg"（相对路径，在不同路由下解析结果不同） -
href="https://cdn.example.com/hero-<span>800</span>.jpg"（HTML 中含 JS 变量插值，浏览器当纯文本处理）
正确做法是服务端直出绝对路径，例如 href="https://cdn.example.com/hero-800.jpg"，哪怕只是占位——只要 URL 和后续 <img srcset> 中某一项完全一致，就能命中缓存。
验证是否生效：看 Network 面板的 Initiator 和 Priority
光看请求发没发不够，得确认它是不是真按响应式逻辑选的资源：
- Initiator 列必须显示为
preload，不是(Other)或parser - Priority 应为
Highest或High（Chrome 112+），不能是Low（漏写as="image"就会这样） - Start Time 应明显早于对应
<img>的请求时间（理想差值 ≥100ms） - Response Headers 中若有
X-Content-Type-Options: nosniff，确保图片 MIME 类型正确（image/webp、image/jpeg等），否则可能被拦截
最容易被忽略的是：即使预加载成功，<img> 标签仍要显式写 fetchpriority="high" 和 loading="eager"，否则浏览器可能因启发式调度延迟解码或渲染，让预加载白忙一场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
