picture标签不识别设备分辨率，而是通过media、srcset和sizes协同，让浏览器依据视口宽度、DPR和格式支持自主选择最优图片；任一配置错误（如media语法错误、type不匹配、sizes缺失或错误）均导致全部回退至img。

直接说结论：picture 标签本身不识别“设备分辨率”，它靠 media、srcset 和 sizes 协同，让浏览器根据视口宽度、设备像素比（DPR）和格式支持，自己选最合适的图。你写错一个括号、漏一个 MIME 类型、配错 sizes，就全 fallback 到 <img>。

为什么 <source></source> 总是被跳过，只显示 <img>

这是最常遇到的问题，根本原因不是浏览器“不支持”，而是条件没写对或服务器不配合：

• media 值必须是合法 CSS 媒体查询，括号不能省：media="(max-width: 768px)" ✅，media="max-width: 768px" ❌
• 多个 <source></source> 的 media 断点不能重叠，否则只取第一个匹配项；推荐用开区间写法：max-width: 767px → min-width: 768px → min-width: 1024px
• type 值必须是标准 MIME 类型，且服务器返回的 Content-Type 响应头必须完全一致：image/webp ✅，webp 或 image/jpg ❌；大小写、空格都不行
• Network 面板里如果看到 blocked:mime-type 或 404，基本就是 type 和实际文件类型/服务配置对不上

srcset 用 w 还是 x？什么时候必须配 sizes

srcset 的描述符决定了浏览器怎么算——选错描述符，sizes 就白配：

• 用 w（如 photo-400w.jpg 400w, photo-800w.jpg 800w）→ 浏览器需要知道图片在页面中占多宽，才能结合 DPR 算出该加载哪张；必须配 sizes，否则退化为等效于 src
• 用 x（如 photo.jpg 1x, photo@2x.jpg 2x）→ 直接按设备像素比匹配，不用 sizes；适合固定尺寸容器、DPR 差异明显的场景（比如图标、按钮）
• 同一 <source></source> 内不要混用 w 和 x，行为未定义，不同浏览器可能表现不一

如何同时适配视口宽度、DPR 和图片格式

三重适配不是堆参数，而是分层决策：先按 media 分设备类型，再在每个 <source></source> 内用 srcset + type 处理 DPR 和格式：

• 顺序很重要：<source type="image/avif"></source> 放最前，type="image/webp" 次之，type="image/jpeg" 不要写，留给末尾的 <img> 回退
• 桌面端高 DPR 场景建议这样写：<source media="(min-width: 1024px)" srcset="hero.avif 1x, hero@2x.avif 2x" type="image/avif"></source>
• 移动端小图可简化：<source media="(max-width: 767px)" srcset="hero-small.webp" type="image/webp"></source>（不需要 x，因为小图通常不强调高密度）
• 末尾的 <img src="hero.jpg"> 是唯一强制要求的回退，必须存在，且 alt 不可为空

真正容易被忽略的是 sizes 的计算逻辑——它不是 CSS 宽度，而是告诉浏览器“这张图在当前断点下会渲染成多宽”，这个值错了，w 描述符就彻底失效。另外，type 依赖服务器响应头，本地测试时如果用 file:// 协议打开 HTML，type 一定失效，必须走 HTTP(S) 服务。