<picture>标签无合法简写形式，必须成对书写且<source>须在<img>前；省略<source>、自闭合或隐藏<source>均导致响应式逻辑失效。
picture 标签没有合法简写形式
HTML 规范里 <picture> 是一个必须成对出现的容器元素，不能像 <img> 那样用自闭合语法（<picture />）替代。浏览器遇到这种写法会直接忽略或解析出错，导致响应式图片逻辑完全失效。
常见“简写”误操作及后果
开发者常试图压缩结构，但多数做法反而破坏语义和兼容性：
- 省略
<source>直接塞<img>：虽然能显示，但所有media、type、sizes切换逻辑全部丢失 - 用 CSS
display: none隐藏部分<source>：浏览器仍会预加载隐藏的资源，浪费带宽，且不改变实际匹配行为 - 把多个
<source>压成一行（无换行缩进）：可读性差，但语法上合法——这不是简写，只是格式压缩，不推荐
真正有效的简化路径
想减少重复代码，应从复用和构建层入手，而非 HTML 语法层面：
- 服务端模板（如 Nunjucks、Jinja）中封装
picture宏，传入sizes、srcset数组自动生成完整结构 - 前端框架（React/Vue）抽离为组件，例如
<ResponsiveImage src="a.jpg" sources={...} />，内部仍渲染标准<picture> - 构建工具（Vite/webpack）配合插件（如
vite-plugin-responsive-images）自动补全<source>，避免手写多尺寸
最简但合规的 picture 结构长什么样
仅满足基础响应式需求的最小可行写法（已去除非必要属性）：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 768px)" srcset="hero-1200w.jpg" /> <img src="hero-480w.jpg" alt="Hero section" /> </picture>
注意：<source> 必须在 <img> 之前；<img> 不可省略，它是 <picture> 的 fallback；所有标签都需显式闭合。
真正难的不是写几行 HTML，而是理清哪些设备需要哪些资源、如何测试不同 media 断点是否生效、以及 CDN 是否正确缓存了各尺寸版本——这些才是落地时卡住最多人的地方。
