Picture 元素：格式切换与艺术指导

概述

`picture` 容器允许为不同媒体条件提供替代资源与格式（如 AVIF/WebP），并对不同视口提供不同构图，实现艺术指导。

用法/示例

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1200.avif 1200w" />
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1200.webp 1200w" />
  <img src="hero-800.jpg" alt="Hero" />
  <!-- 可结合 sizes 控制显示宽度 -->
</picture>

工程建议

• 构建管线生成多格式与多尺寸资源；验证在真实设备上的选择与解码性能。
• 保留回退 `img`，确保在不支持新格式时仍可显示；与 `fetchpriority` 协作优化关键图加载。
• 与 CSS 布局与 `object-fit`/`aspect-ratio` 协作，保证构图与稳定性。

参考与验证

• MDN：`<picture>` — https://developer.mozilla.org/docs/Web/HTML/Element/picture
• web.dev：Responsive images — https://web.dev/learn/design/responsive-images