picture标签不优化性能，仅提供选择权；media语法错误、sizes不匹配css实际宽度、type与content-type不一致或srcset混用w/x描述符，均会导致浏览器跳过source而仅加载img fallback。
picture 标签本身不优化性能，它只提供选择权；写错一个括号、漏掉 sizes、type 大小写不对，浏览器就直接跳过所有 source，只加载 <img> 的 fallback 图。
media 语法错误导致全量回退
最常见失效不是浏览器不支持，而是 media 属性根本没被解析：写成 media="max-width: 768px" ❌（缺括号），必须是 media="(max-width: 768px)" ✅。括号缺失、空格错位、写成 media="tablet" 这类非标准值，浏览器静默忽略整条 <source></source>。
断点顺序和互斥性也关键：<source media="(max-width: 768px)"></source> 必须放在最前，<source media="(min-width: 769px)"></source> 紧随其后——不能用 (min-width: 768px) 和 (max-width: 768px) 并存，768px 宽度行为未定义，Safari 可能跳过，Chrome 可能命中第一条而永远不加载桌面图。
sizes 不匹配 CSS 实际占位宽度
sizes 不是“你想让它多宽”，而是“它在当前视口下**真实渲染的宽度**”。如果 CSS 中图片容器是 grid-template-columns: repeat(3, 1fr)，大屏下图宽 ≈ 33vw，sizes 就该写 "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" ✅；写成 "100%" 或 "300px" ❌，浏览器无法换算，直接按默认 100vw 计算，可能拉下 1920w 图却只显示 300px 宽，浪费带宽。
验证方法：DevTools → Elements → 选中 <img> → Computed → 查看 width 值，再反推 sizes 表达式是否覆盖该宽度区间。
type 与服务器 Content-Type 不一致
type="image/webp" 要求 Nginx/Apache 返回的响应头必须是 Content-Type: image/webp，大小写、拼写、空格全要一致。写成 type="webp"、type="image/jpg" 或服务端返回 text/plain，Chrome 就标为 blocked:mime-type，整条 <source></source> 被丢弃。
WebP + JPEG 双格式回退必须三层结构：<source type="image/webp"></source> → <source type="image/jpeg"></source> → <img src="fallback.jpg">。浏览器从上到下匹配，支持 WebP 就用，不支持就跳过，落到 JPEG；连 JPEG 都不支持的老浏览器，才走 <img>。
srcset 冗余与 w/x 混用
srcset 不是“越多越好”。把 320w 到 3840w 每隔 100px 写一个，浏览器仍要逐个解析匹配条件，拖慢预加载阶段。只保留你 CSS 媒体查询中真实触发的断点宽度，比如只在 @media (min-width: 768px) 和 @media (min-width: 1200px) 切布局，srcset 就只需 "photo-768w.jpg 768w, photo-1200w.jpg 1200w"。
同一 <source></source> 的 srcset 里只能用 w 或 x 一种描述符："photo@1x.jpg 1x, photo@2x.jpg 2x" ✅；混写 "photo-400w.jpg 400w, photo@2x.jpg 2x" ❌，Safari 可能整条跳过。
真正麻烦的是：所有配置都对了，但图源文件路径 404、CDN 缓存了旧响应头、或 <img> 没设 width/height 导致 layout shift —— 这些不会报错，只会让你觉得“图片加载慢”或“页面闪一下”，实际跟 <picture></picture> 语法无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
