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/pictureweb.dev：Responsive images — https://web.dev/learn/design/responsive-images