HTML中picture标签多源适配 HTML中picture响应式图片

<picture> 不是响应式图片的魔法标签，而是将选择权交给浏览器：必须正确书写 <source> 的 media（完整媒体查询）、type（标准 MIME 类型）及顺序，且 <img> 为必需 fallback；否则浏览器静默忽略或仅加载 fallback。

直接说结论： <picture> 不是“让图片变响应式”的魔法标签，它只是把选择权交给浏览器——你得写对 <source> 的条件、顺序和格式，否则浏览器要么只加载一张图，要么干脆 fallback 到 <img src> 而你还不知道。

media 属性必须是完整媒体查询，不能省括号或关键字

常见错误是写成 media="max-width: 768px" 或 media="768px"，这会让整个 <source> 被浏览器静默忽略。浏览器只认标准 CSS 媒体查询语法。

• ✅ 正确写法：media="(max-width: 768px)"、media="(min-width: 1441px)"、media="(prefers-color-scheme: dark)"
• ❌ 错误写法：media="max-width: 768px"（缺括号）、media="small"（非标准值）、media="screen and (max-width: 768px)"（虽合法但冗余，<source> 默认只作用于屏幕媒体）
• 多个 <source> 的 media 条件如果重叠（比如同时写了 (max-width: 768px) 和 (max-width: 1024px)），浏览器只取第一个匹配的，后面的直接跳过——这不是 bug，是设计行为

srcset + type 组合才是现代格式降级的关键

想让支持 WebP 的设备加载 .webp，不支持的退到 .jpg，光靠文件名或路径没用，必须靠 type 属性触发 MIME 类型判断。

• type 值必须是标准 MIME 类型，如 image/webp、image/avif、image/jpeg；写成 type="webp" 或 type="jpg" 会失效
• 服务器返回的 Content-Type 必须匹配 type 值，否则即使路径对、格式对，浏览器也会跳过该 <source>
• 顺序即优先级：所有 image/webp 的 <source> 必须排在 image/jpeg 之前，因为浏览器从上到下匹配，一旦找到支持的 type + 满足 media 就停止

img 标签不是可选的，它是强制兜底且必须带 src

<img> 在 <picture> 里不是装饰，而是浏览器找不到任何匹配 <source> 时的唯一 fallback。漏掉它，或者只写 <img alt="..."> 而不写 src，会导致图片区域空白或仅显示 alt 文本。

立即学习“前端免费学习笔记（深入）”；

• <img> 必须存在，且必须含 src 和 alt 属性
• <img> 上可以（也推荐）加 sizes 和 srcset，用于进一步优化其自身加载逻辑，尤其是当它作为 fallback 也要适配 DPR 时
• 开发时如果发现“始终只加载 <img src> 的图”，先检查 Network 面板里所有 <source> 的请求是否 404 或 status 为 `(blocked:mime-type)` —— 很可能是 type 写错或服务器 content-type 不匹配

Chrome DevTools 里看不到切换？先关缓存再硬刷

浏览器对 <source> 的选择结果不会在 Elements 面板里高亮哪条生效，Network 面板里也容易被缓存干扰。你以为没切，其实只是缓存还在用旧资源。

• 打开 DevTools → Network → 勾选 Disable cache → Cmd+Shift+R（Mac）或 Ctrl+F5（Win）硬刷新
• 在 Network 面板过滤 Img，看实际加载的是哪个路径；注意区分是 <source> 还是 <img> 发起的请求
• 用 Device Toolbar 切换预设尺寸（如 iPhone SE、iPad Pro）比手动缩放窗口更可靠，因为 media 查询依赖 viewport width，不是浏览器窗口宽

最易被忽略的一点：你写的 media 和 type 都对，但服务器没配对 WebP 文件返回 image/webp 的 Content-Type，浏览器就当它不存在——这种问题不会报错，只会安静地跳过，然后默默加载 <img> 的 fallback。