先记住这个答案
<picture> 让浏览器按顺序检查 <source> 的媒体条件或图片格式，随后仍由内部 <img> 承担实际图像与替代文字。换构图，例如窄屏改用人物近景，才需要这种不同来源；同一张图只调整清晰度或显示宽度，<img srcset> 往往足够。把两种用途混用会让资源选择难以检查。
- 同构图换清晰度优先
srcset - 换裁切构图可用
<picture> media决定<source>是否可用- 内层
<img>承载alt
手机横幅需要重新裁图
首页横幅桌面版是宽画幅，主体在左；手机上直接缩小会把人物缩到看不清。可在 <picture> 里给窄屏一张重新裁过的竖版图，宽屏使用横版图。这叫艺术方向切换，改变的是画面内容；如果两张图构图相同，只是像素密度不同，用同一 <img> 的 srcset 就更直接。浏览器会先筛选匹配的 <source>，再从该来源的候选里挑资源。
<picture>
<source media="(max-width: 600px)" srcset="/hero-mobile.jpg">
<img
src="/hero-desktop.jpg"
alt="团队在白板前讨论产品方案"
width="1200" height="600">
</picture><source media> 使用媒体查询条件，控制哪组图片候选可用；它不等同于 CSS 里给元素改宽度。
上面的代码只给手机和桌面各一个文件，已经足以说明艺术指导：手机用近景，桌面用宽幅。生产环境若希望同一构图兼顾高密度屏，可把各分支的 srcset 扩成多个宽度候选，再配 sizes 告诉浏览器大致显示宽度。不要在 <source> 中漏写 srcset 后指望它的 src 像 <img> 一样生效。
先选来源，再选来源中的候选
命中来源之后，若还提供多个 srcset 候选，浏览器会继续根据描述符和 sizes 等信息选文件。<picture> 本身不是最终承载替代文字的图像节点；alt 应写在内部 <img>。选择不同格式时可用 type，并给不支持该格式的环境保留后备来源。
一张横版海报直接缩进手机卡片时，人物可能被裁到画面边缘；这不是增加像素密度能解决的问题。窄屏 <source> 可指向重新裁切的竖版图，宽屏再用原横图，各来源内部仍能各列出多个清晰度候选。无论选中哪一支，<img> 上的 alt 应概括当前内容共同传达的信息；如果两张图传达不同含义，就需要重新审视文案。
排查资源选错时，在 DevTools 中检查图片的 currentSrc，它显示浏览器最终选择的 URL；看 HTML 里排在第一位的 <source> 不够。还要核对 media 条件、服务器返回的格式，以及 sizes 是否描述真实布局宽度。浏览器可能在宽度变化后继续使用已下载的更大图片以利用缓存，所以测试时最好以新的加载环境核对。
容易答错的地方
- 用 CSS 隐藏桌面图和手机图
- 两张
<img>可能都被请求；使用<picture>让浏览器按条件选来源更合适。 - 忘记内层
<img>的alt - 替代文字属于实际图像元素，不能因为外面有
<picture>就省略。
面试官还会怎么问？
同图不同 1x、2x 资源需要 picture 吗？
通常不需要，<img srcset="... 1x, ... 2x"> 已能表达密度候选。
media 与 sizes 各管什么？
media 选择 <source> 是否适用，sizes 描述候选图在布局中的预期显示宽度。
为什么还要写 img src？
它是后备资源和实际图像元素，也承载 alt、宽高等属性。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。