#HTML 的 <picture> 标签
请查看 HTML 元素帮助手册 了解更多 HTML 元素。
HTML 的 <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。
#属性
请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
#示例
<picture>
<!-- 针对大屏幕（宽度≥1200px）提供高清图像 -->
<source
media="(min-width: 1200px)"
srcset="large-image.jpg, large-image-2x.jpg 2x"
type="image/jpeg">
<!-- 中等屏幕（宽度≥768px）提供中等分辨率图像 -->
<source
media="(min-width: 768px)"
srcset="medium-image.webp, medium-image-2x.webp 2x"
type="image/webp">
<!-- 小屏幕设备提供优化后的图像（WebP格式优先） -->
<source
srcset="small-image.webp"
type="image/webp">
<!-- 默认回退图像（当浏览器不支持<picture>或所有source不匹配时使用） -->
<img
src="fallback-image.jpg"
alt="描述图像内容的文字"
width="800"
height="450"
loading="lazy">
</picture>