HTML <picture> 元素

HTML <picture> 元素

HTML <picture> 元素为网页开发者在指定图像资源方面提供了更大的灵活性。

<picture> 元素包含一个或多个 <source> 元素，每个元素通过 srcset 属性引用不同的图像。这样，浏览器可以选择最适合当前视图和/或设备的图像。

每个 <source> 元素都有一个 media 属性，用于定义图像最合适的使用场景。

实例

针对不同的屏幕尺寸显示不同的图像：

<picture>
  <source media="(min-width: 650px)" srcset="amg-1.jpg">
  <source media="(min-width: 465px)" srcset="amg-2.jpg">
  <img src="amg-3.jpg">
</picture>

亲自试一试

注意：请始终将 <img> 元素指定为 <picture> 元素的最后一个子元素。不支持 <picture> 元素的浏览器，或者没有匹配的 <source> 标签时，将使用 <img> 元素。

何时使用 <picture> 元素

<picture> 元素有两个主要用途：

1. 带宽

如果您使用的是小屏幕或设备，则无需加载大型图像文件。浏览器将使用第一个属性值匹配的 <source> 元素，并忽略任何后续元素。

2. 格式支持

某些浏览器或设备可能不支持所有图像格式。通过使用 <picture> 元素，您可以添加所有格式的图像，浏览器将使用它识别的第一种格式，并忽略任何后续元素。

实例

浏览器将使用它识别的第一种图像格式：

<picture>
  <source srcset="panda.png">
  <source srcset="girl.jpg">
  <img src="flower.gif" alt="花朵" style="width:auto;">
</picture>

亲自试一试

注意：浏览器将使用第一个属性值匹配的 <source> 元素，并忽略任何后续的 <source> 元素。

HTML 图像标签

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。