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

--- title: Picture 元素：格式切换与艺术指导 keywords: - picture - source type - art direction - WebP/AVIF - 响应式 description: 使用 `picture` 与 `source` 进行格式切换与艺术指导，为不同设备与布局选择最佳资源与构图，实现更好的响应式与性能。 categories: - 文章资讯 - 编程技术 --- ## 概述 `picture` 容器允许为不同媒体条件提供替代资源与格式（如 AVIF/WebP），并对不同视口提供不同构图，实现艺术指导。 ## 用法/示例 ```html ``` ## 工程建议 - 构建管线生成多格式与多尺寸资源；验证在真实设备上的选择与解码性能。 - 保留回退 `img`，确保在不支持新格式时仍可显示；与 `fetchpriority` 协作优化关键图加载。 - 与 CSS 布局与 `object-fit`/`aspect-ratio` 协作，保证构图与稳定性。 ## 参考与验证 - MDN：`` — https://developer.mozilla.org/docs/Web/HTML/Element/picture - web.dev：Responsive images — https://web.dev/learn/design/responsive-images