必须同时设置sizes和as="image"才能使link preload的srcset生效，因为sizes告诉浏览器图片显示宽度以选择合适尺寸，as="image"确保正确解析为图片资源，且srcset仅支持w单位宽度描述符。
link标签里用srcset预加载图片必须配sizes
单独写 srcset 不起作用，浏览器根本不会解析它。因为 <link rel="preload"> 是资源级预加载，不涉及响应式布局计算，sizes 才告诉浏览器“这张图在页面上大概占多宽”，从而选对 srcset 里的对应尺寸。
-
sizes值要和实际 CSS 中该图片的显示宽度逻辑一致，比如sizes="100vw"或sizes="(max-width: 768px) 100vw, 50vw" - 如果页面中图片是固定宽度（如
width: 320px），直接写sizes="320px"最稳妥 - 漏掉
sizes，即使srcset写得再全，Chrome 和 Firefox 都会忽略这条预加载，Network 面板里看不到请求
preload的as属性必须设为image
不加 as="image"，浏览器会当成普通脚本或样式预加载，导致 MIME 类型校验失败、缓存策略错乱，甚至被降级为 fetch 级别处理。
- 错误写法：
<link rel="preload" href="photo.jpg" srcset="...">（缺as） - 正确写法：
<link rel="preload" as="image" href="photo.jpg" srcset="photo-480w.jpg 480w, photo-800w.jpg 800w" sizes="50vw"> - 注意：
as="image"不能写成as="img"或as="picture"，只有image是标准值
srcset里的宽度描述符必须带单位（w）
<link> 不支持 x 描述符（如 2x），只认 w 单位的宽度描述符。用 x 会导致整个 srcset 被忽略。
- ✅ 正确：
srcset="img-400w.jpg 400w, img-800w.jpg 800w" - ❌ 错误：
srcset="img@1x.jpg 1x, img@2x.jpg 2x"（完全无效） - 如果只有一张图想适配高 DPR 设备，仍得用宽度描述符模拟，比如
srcset="img-800w.jpg 800w"+sizes="400px"（让 2x 屏选 800w 版本）
不要用preload代替picture或srcset的响应式能力
<link rel="preload"> 只触发一次请求，它不会根据 viewport 变化重新选图，也不参与 <picture></picture> 的媒体查询匹配。它只是“提前拉一张最可能用到的图”。
- 预加载不能替代 HTML 中的
<img srcset="..." sizes="...">，两者职责不同：一个是资源调度，一个是渲染逻辑 - 如果
sizes写得太粗略（如全写"100vw"），而实际布局在小屏下只占 300px，可能导致预加载了远超需要的大图 - 多个断点预加载？别这么做。浏览器不支持单个
<link>加载多个候选图，只能选一个最匹配的 URL 提前 fetch
sizes 的准确性比 srcset 列得多更重要；写错了 sizes，等于白写。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
