标准答案
- picture 是容器，内部可以放多个 source 和一个 img。
- source 可以用 media、type、srcset 提供不同条件下的图片资源。
- img 是必须的兜底元素，也承载 alt、width、height、loading 等关键属性。
- 如果只是同一张图按像素密度或宽度切换，img 的 srcset 和 sizes 通常就够了。
- 如果要按视口换裁剪图、优先 AVIF/WebP 并降级到 JPG，picture 更合适。
题目解析
这题要区分响应式分辨率和艺术方向。前者是同一图片不同尺寸，后者是不同裁剪或不同内容。
无论用不用 picture，img 的 alt 和尺寸属性都不能省略，否则会影响可访问性和布局稳定。
代码示例
浏览器会按 source 顺序选择第一个满足条件的资源，最后回退到 img。
HTML
<picture>
<source type="image/avif" srcset="/hero.avif">
<source media="(max-width: 640px)" srcset="/hero-mobile.webp">
<img
src="/hero.jpg"
alt="产品截图"
width="1200"
height="640"
loading="lazy"
>
</picture>常见误区
- 用了 picture 后忘记写 img，导致没有兜底内容。
- 把不同格式、不同尺寸和不同裁剪混在一起，却没有明确选择条件。
- 不写 width 和 height，图片加载后造成布局偏移。