只有当换构图（art direction）时才用<picture>，否则用<img srcset sizes>更稳；<source media>未生效常因media不匹配而回退到<img src>，且<source>必须前置、media需完整括号、断点互斥、<img>不可省略。
只有当你要换构图，而不是换尺寸或分辨率时，<picture> 才是正确选择。其他情况用 <img srcset="" sizes=""> 更稳、更少出错。
为什么写了 <source media> 却不切换图片
浏览器根本没匹配到任何 <source>，直接 fallback 到末尾的 <img> —— 而你可能压根没注意它正在悄悄加载那张“兜底图”。
-
media值必须是完整 CSS 媒体查询，比如(max-width: 768px)，不能只写768px或漏掉括号 - 多个
<source>按顺序匹配，第一个满足条件的就停，后面的全忽略——所以更具体的规则（如(min-width: 1200px) and (max-width: 1440px)）得放在前面 - 如果所有
media都不匹配（比如你写了(max-width: 480px)和(max-width: 768px)，但当前视口是 1024px），浏览器就跳过全部<source>，只加载<img src> - 开发工具 Network 面板里看到始终是同一张图？先检查
<img>的src是否被你误设成了“默认图”
<source media> 必须配 srcset，但别乱加 sizes
media 是断点开关，srcset 是它要打开的资源列表；而 sizes 是给 srcset 里带 w 描述符的图用的——如果你的 srcset 写的是 mobile-portrait.jpg 480w, desktop-pano.jpg 1200w，那就必须配 sizes；如果只是 mobile.jpg, desktop.jpg 这种单图，sizes 不仅无效，还容易误导浏览器。
-
srcset里用w描述符（如hero-400w.jpg 400w）时，sizes必须存在，且值要和 CSS 实际渲染宽度一致（比如max-width: 600px的容器，sizes就别硬写"100vw"） -
sizes值里不能含px，只能是vw、vh、calc()等相对单位 - 如果
srcset用的是x描述符（如photo.jpg 1x, photo@2x.jpg 2x），sizes可以省略——浏览器只看 DPR，不依赖显示宽度
<img> 不是可选项，是强制 fallback
<picture> 自己不渲染任何内容，它只是个规则容器。真正决定是否显示、显示什么、alt 文本怎么读的，只有末尾那个 <img>。
立即学习“前端免费学习笔记（深入）”；
- 没有
<img>，页面上就是空白——不是报错，也不是加载失败，就是空着 -
<img>必须有src和alt，缺一不可；它的src就是所有不匹配<source>时的最终加载地址 -
<img>的src不需要是“最低清”的图，它可以和某个<source>指向同一张图——只要语义上它是安全兜底即可 -
<source>必须在<img>之前，顺序错了整个逻辑就崩了
最容易被忽略的一点：art direction 的本质是“换内容”，不是“换大小”。如果你发现某张图在桌面端变宽、在手机端变窄，但主体始终是同一片天空、同一个人脸，那说明你其实没做 art direction，只是在做分辨率适配——这时候删掉 <picture>，改用 <img srcset="" sizes="">，反而更准、更轻、更不容易翻车。
