picture标签本身不提供适配，仅将选择权交给浏览器；真正起效的是source的media、srcset、type及img的srcset和sizes，顺序错误、混用描述符或漏写img均导致仅加载fallback图。
source 顺序错乱、media 条件重叠、img 缺失或没设 alt，都会导致图片不加载或可访问性失败。
下面按真实开发中高频踩坑点组织建议，不是教你怎么写第一个 picture，而是帮你写出能长期维护、跨项目复用、浏览器兼容稳、SEO 友好的通用结构。
如何组织标签的顺序与media条件
source 是从上到下匹配的，第一个满足 media 的就用，后面的全跳过。顺序错了，小屏可能加载大图，或者桌面端 fallback 到默认图。
- 必须按从窄到宽（移动端优先）排列：
<source media="(max-width: 767px)" srcset="m.jpg"></source>放最前，<source media="(min-width: 1200px)" srcset="l.jpg"></source>放最后 - 避免
media范围重叠，例如同时写(max-width: 768px)和(max-width: 769px)，后者永远不生效 - 不要用
min-width开头的链式写法（如min-width: 320px→min-width: 768px），因为所有 >=320px 的设备都满足第一条，后续全被跳过
什么时候该用srcset+sizes，而不是多个source
srcset + sizes 解决的是**同一构图下不同分辨率/宽度的图**；picture + source 解决的是**不同构图或格式切换**（比如移动端裁剪人脸、桌面展示全景，或 WebP 回退 JPG）。
- 如果只是适配 1x/2x 屏幕，用
<img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x">更轻量，不用包picture - 如果要同时做「格式降级 + 尺寸适配」，就得嵌套：一个
source用type="image/webp"，另一个用type="image/jpeg"，各自带自己的srcset和sizes -
sizes必须和 CSS 中图片容器的实际宽度逻辑一致，否则浏览器预加载会选错图；常见错误是写了sizes="(max-width: 768px) 100vw"，但实际容器被 flex 或 grid 压缩成 50% 宽
img标签在picture里的角色不能模糊
img 不是“备用图”，而是**强制 fallback 和语义锚点**：所有浏览器都必须渲染它，即使前面 source 全部匹配成功；它还承担 alt、loading、decoding 等关键属性。
-
img的src必须指向一张真实存在的图（哪怕只是 1px 占位图），不能留空或写src="#"，否则 Safari 会拒绝加载任何source -
alt必须写，且内容要和最终展示的图语义一致；如果不同source展示的是完全不同的场景（如“手机界面截图” vs “后台架构图”），alt应描述通用意图，例如“系统操作示意” - 可以给
img加loading="lazy"，但不要加width/height—— 这些应由 CSS 控制，否则响应式失效
构建可复用的HTML片段要注意什么
所谓“通用模板”，不是复制粘贴就能用，而是指结构稳定、变量清晰、扩展无副作用。- 把断点值（如
768px、1200px）抽成 CSS 自定义属性或构建时变量，避免硬编码散落在多处 - 每个
source的srcset值建议包含至少两个尺寸（如"small-400w.jpg 400w, small-800w.jpg 800w"），让浏览器有选择余地 - 如果项目需支持 IE（已淘汰但仍有内网场景），得额外加
<!--[if IE]><img><![endif]-->注释 fallback，现代项目可忽略 - WebP 格式检测不能靠 JS，必须用
<source type="image/webp" srcset="..."></source>，浏览器原生识别，失败自动跳下一个source
真正难的不是写出一个能跑的 picture，而是保证它在三个月后新加的暗色模式、新引入的 CMS 图片上传逻辑、以及设计师突然要求“竖版图只在手机显示”时，依然不崩、不漏 alt、不拉低 LCP。结构定死，变量留口，fallback 闭合——这才是“通用”的实际含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
