先记住这个答案
<picture> 中的 <source> 提供按媒体条件或格式区分的候选，浏览器按顺序选择合适来源，内部 <img> 才是真正显示的图片和替代文本所在。窄屏换近景裁切是典型用途；若只是同一构图选择不同清晰度，直接用 <img srcset> 更简单。带宽度描述符的候选还要配合 sizes 说明预计显示宽度。
picture负责条件化来源source声明媒体或格式条件srcset给出图片候选img承载后备和alt
横图竖图各自有分辨率候选
新闻首页桌面用横向大图，手机用重新裁切的竖向图；每个版本还各有多档分辨率。<picture> 先按窄屏媒体条件选择竖图来源，再按 srcset 和 sizes 选合适的文件。若只想在同一构图下换清晰度，不必增加 <picture>，单个 <img> 的响应式候选就够。不要用 CSS 同时放两张图片再隐藏一张，可能造成多余请求。
<picture>
<source media="(max-width: 600px)"
srcset="/mobile-400.jpg 400w, /mobile-800.jpg 800w"
sizes="100vw">
<img src="/desktop-1200.jpg" alt="活动现场的演讲者"
width="1200" height="600">
</picture>浏览器按顺序检查 <source>，选择第一个媒体条件和类型都适用的来源，再从它的候选里挑文件。
示例的手机来源只列竖图候选，桌面回退 <img> 只有一个横图。手机上若条件命中，实际下载源可能是 400w 或 800w，取决于 sizes 与设备密度；桌面则回到横图。检查时可以在开发工具里读 img.currentSrc，再确认页面上显示的确是期望的裁切。width、height 写在 <img> 上还可为加载前预留空间，但两种构图比例不同仍需用 CSS 安排容器。
先选来源，再选候选资源
sizes 是资源选择提示，不决定图片实际 CSS 宽度；应与布局规则一致。内层 <img> 必须存在，它负责图像语义和后备显示。给 width、height 或合适的比例可帮助预留空间，但艺术方向切换后不同构图的比例可能变化，布局也要相应处理。
窄屏 <source> 可以用重新裁切的竖图，并在它的 srcset 中列出不同像素宽度；宽屏来源则是横图的另一组候选。浏览器先看媒体条件和类型，选定来源后再结合 sizes 与设备密度挑文件，不是从所有来源里只按最大像素数挑一张。若 media 写错，图可能清晰却构图不适合当前布局。
<source> 的顺序会影响选择：前面条件已匹配且格式可用时，后面更适合的文件也可能没机会被考虑。设计上应把更具体的媒体条件放前面、默认 <img> 留在最后，并用 currentSrc 在窄屏和宽屏实际查看结果。若只想压缩格式切换，保持各格式相同构图，避免同一断点因格式支持差异显示不同内容。
容易答错的地方
- 把
sizes当成 CSS 宽度样式 - 它告诉浏览器预计显示尺寸，实际盒子宽度由 CSS 决定。
- 把
alt写在 source 上 - 替代文本写在实际图像元素
<img>上。
面试官还会怎么问？
为什么 source 顺序重要？
浏览器使用第一个适用来源，更具体的条件应放在前面。
同图 1x 和 2x 一定要 picture 吗？
不需要，单个 <img srcset> 就能给出密度候选。
不同裁切比例怎样避免布局跳动？
按各来源的比例安排尺寸，并测试切换条件时的占位与实际显示。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。