必须用 <picture> 而非 <img> 的核心判断依据是需展示语义不同的图（如手机裁人脸、桌面展全景），而非同一图的缩放版；仅当需 art direction、现代格式降级或多重条件组合时才不可替代。

标签不是“更高级的”，它只在三个明确场景下不可替代：需要不同构图、必须支持现代图像格式、或需组合多个条件（如“大屏+WebP”）。其他情况用更轻量、更稳定。

什么时候必须用 而不是

核心判断依据是：你是否要让不同设备看到**语义上不同的图**，而不是同一张图的缩放版。

• 需要 art direction：手机裁人脸特写、桌面展全景——<source> 的 media 属性按视口断点切换独立图片路径
• 必须优先加载 image/avif 或 image/webp，但得兜底到 image/jpeg——靠 <source> 的 type 属性实现格式降级
• 同时满足两个条件才选某图：比如 media="(min-width: 1200px)" type="image/avif"，<img> 无法表达这种“与”逻辑
• 如果只是“小屏加载小图、大屏加载大图”，且构图一致——直接用 <img srcset> + sizes，90% 的项目都该走这条路

<source> 的匹配顺序和 media 写法容易出错

浏览器从上到下逐个检查 <source>，遇到第一个 media 为真就停止，后面的全忽略。这导致两个常见翻车点：

• 断点写成 max-width: 768px、max-width: 1024px，结果中屏设备匹配了第一个就停，永远进不到第二个——应改用 min-width 递增，如 (min-width: 1024px)、(min-width: 769px)、(max-width: 768px)
• 把 media="768px" 或 media="tablet" 当成合法值——它必须是完整 CSS 媒体查询，否则整条 <source> 被静默跳过
• 漏掉 orientation: portrait 这类不稳定条件：iOS Safari 对 orientation 解析不一致，建议用宽度断点替代

<img> 不是可选项，而是强制兜底组件

<picture> 内最后一个子元素**必须是 <img>**，且必须带 src 和 alt。缺一不可：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 没有 <img>，所有 <source> 都不匹配时，页面对应区域就是空白，不报错也不提示
• src 路径 404 不会触发控制台报错，只会静默 fallback 到下一个 <source> 或最终失败——调试得开 Network 面板清缓存后看实际加载项
• alt 不仅关乎无障碍，也影响 SEO；写成 alt="banner1" 或留空，等于放弃这张图的语义价值
• 别把纯装饰图塞进 <picture>——用 CSS background-image 更合适，也避免干扰屏幕阅读器

现代框架里，<picture> 往往被封装掉了

Next.js 的 <Image>、Nuxt 的 <NuxtImg>、Remix 的 loader 图片方案，底层都生成了符合规范的 <picture> 结构，但开发者不用手写 media 和 srcset。这意味着：

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

• 如果你在用这些框架，直接配好尺寸和格式偏好，框架会自动输出最优 <picture> HTML
• 手写 <picture> 的主要场景，反而是静态站点、CMS 模板、或需要精细控制断点与构图的营销页
• 框架生成的代码常带 decoding="async"、fetchpriority="high" 等优化属性，手写时容易遗漏

真正卡住项目的，从来不是会不会写 <picture>，而是没想清楚：这张图，到底是要“换尺寸”，还是“换内容”。前者交给 <img srcset>，后者才轮到 <picture> 出场。