<picture>必须满足四个硬性条件：正确的<source>顺序、合法的media值、末尾带src和alt的<img>、且<img>不能自闭合；否则浏览器会静默跳过<source>直接加载<img>。

标准 <picture> 必须满足四个硬性条件：正确的 <source> 顺序、合法的 media 值、末尾带 src 和 alt 的 <img>、且 <img> 不能自闭合。

为什么浏览器只加载了 <img> 而不是 <source>

这不是浏览器“没选”，而是它根本没进入匹配逻辑——多数情况是 <source> 被静默跳过：

• media="max-width: 768px" 缺少括号 → 写成 media="(max-width: 768px)" 才合法
• media="768px" 或 media="tablet" → 非法媒体查询，整条 <source> 失效
• <source> 写在 <img> 后面 → 浏览器直接忽略，不解析
• 所有 media 都不匹配 → 不报错，也不警告，默默 fallback 到 <img src>

media 的顺序必须从宽到窄

浏览器从上到下扫描，遇到第一个为 true 的就停止，不会继续判断。顺序错会导致高分屏加载小图、桌面端卡在手机规则里：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• ✅ 正确：media="(min-width: 1200px)" → media="(min-width: 768px)" → media="(max-width: 767px)"
• ❌ 错误：media="(max-width: 767px)" 放最前 → 所有设备都命中这条，宽屏规则永不执行
• ⚠️ 边界重叠危险：(min-width: 768px) 和 (max-width: 768px) 同时存在 → 768px 宽度只走前者，行为不可控

<img> 不是可选的，它是强制 fallback

漏掉它、或只写 <img alt="..."> 却没 src，整个区域就是空白——<img> 是唯一保证渲染的节点：

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

• 必须存在，且必须含 src 和 alt 属性
• 不能写成 <img /> 或 <img> → 必须是 <img src="..." alt="...">
• 推荐显式设置 width 和 height（或用 aspect-ratio），避免 CLS（布局偏移）

什么时候该用 <picture>，而不是

<img srcset></H3>
<p><code><picture>

不是“更高级的 <img>”，它是为特定场景设计的：

• ✅ 真正需要艺术指导：桌面版展示全景，手机版只保留人脸特写 → 必须用 <source> + media
• ✅ 强制格式降级：优先 image/avif，再 image/webp，最后 image/jpeg → 用 type 属性
• ❌ 单纯适配 DPR 或视口宽度变化 → 90% 场景用 <img srcset="..." sizes="..."> 更安全、更轻量

最容易被忽略的一点：你写的 media 值是否真被浏览器当作有效查询执行了？打开 DevTools 的 Network 面板，刷新页面，看实际加载的是哪张图——别靠肉眼猜，要靠请求记录验证。