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

---

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

keywords:

• picture
• source type
• art direction
• WebP/AVIF
• 响应式

description: 使用 picture 与 source 进行格式切换与艺术指导，为不同设备与布局选择最佳资源与构图，实现更好的响应式与性能。

categories:

• 文章资讯
• 编程技术

---

概述

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