srcset 和 picture 不是“开了就自动高清”，浏览器严格按规则匹配，写错括号、漏 src、混用 x/w 描述符等均导致静默 fallback 或空白；media 语法错误、type 不匹配、sizes 写错或缺兜底 src 都会使适配失效。
srcset 和 picture 不是“开了就自动高清”，浏览器只按你写的规则机械匹配——写错一个括号、漏一个 src、混用 x 和 w，它就静默 fallback 到兜底图，甚至空白。
为什么写了 picture 却始终加载同一张图
这是最常被忽略的“失效”现象。浏览器不会主动猜测你是否想适配 2x 屏——它只严格按 <source> 的条件匹配，一个都匹配不上就直接走 <img src>。
-
media值写错：比如media="max-width: 768px"（缺括号）或media="768px"（非媒体查询语句），浏览器直接忽略该<source> -
srcset单独出现但没配media或type：该<source>不参与选择，等于白写 -
<img>缺src：页面图片区域留空，不是报错，是静默失败 - Network 面板看到
blocked:mime-type：说明服务器返回的Content-Type和你写的type="image/webp"不一致（比如返回text/plain）
srcset 里该用 1x/2x 还是 400w/800w
选 x 还是 w 不是凭感觉，取决于你要控制的维度：
- 想按设备物理像素密度适配（比如 Retina 屏自动切 2x 图），用
x描述符；srcset必须写成"photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"，且最高倍率图必须放最后（浏览器从左到右匹配，遇到第一个满足 DPR 的就停） - 想按页面中图片实际渲染宽度切换（比如小屏占满、桌面只占 50%），必须用
w描述符，并配sizes属性；sizes值必须是有效长度或媒体条件，如"(max-width: 480px) 100vw, (min-width: 481px) 400px"，不能写成width: 400px - 严禁混用：
photo-400w.jpg 400w, photo@2x.jpg 2x是未定义行为，Chrome 可能整个srcset忽略
<source> 的 media 和 type 是 AND 关系
media 控制「何时用这张图」，type 控制「这张图是否能被解码」，两者是 AND 关系，不是 OR。
立即学习“前端免费学习笔记（深入）”；
-
media必须是有效的媒体查询（如(min-width: 768px)），空值或语法错误会让该<source>被忽略 -
type必须是 MIME 类型字符串（如image/webp），拼错（如image/webp;多了个分号）或浏览器不支持，就会跳过 - 顺序决定优先级：把最具体、最高优先级的规则放前面；
<source>按顺序解析，第一个同时满足media和type的即被采用 - 务必保留兜底的
<img src>：老浏览器（IE、旧版 Safari）和部分低版本 Android WebView 完全不解析srcset，只看src；漏掉整张图就空白
调试时别信“我写了 2x 就一定加载 2x 图”
打开 DevTools → Network → 刷新，点开图片请求，检查 Request Headers 中的 dpr 和 viewport-width，再对照你写的 srcset 和 sizes 算一遍浏览器决策逻辑。
- 高清图加载了但看起来模糊？检查 CSS 是否强制设了
width/height，覆盖了 intrinsic 尺寸；优先用max-width: 100%; height: auto，或用object-fit: cover替代直接设高 -
sizes不是告诉浏览器“图片应该多大”，而是告诉它“在当前视口下，这张图*预计会渲染成多宽*”；如果写错（比如写死"100vw"，但实际 CSS 把图片限制在max-width: 600px），就可能加载过大图造成浪费 - 服务端的
Acceptheader 和<picture>无关——<picture>是纯客户端决策机制，不发请求前就已确定加载哪个资源
