<picture>: Picture 元素

试一试

<!--Change the browser window width to see the image change.-->

<picture>
  <source
    srcset="/shared-assets/images/examples/surfer.jpg"
    media="(orientation: portrait)" />
  <img src="/shared-assets/images/examples/painted-hand.jpg" alt="" />
</picture>

为了决定加载哪个 URL，用户代理会检查每个 <source> 的 srcset、media 和 type 属性，以选择最符合当前布局和显示设备能力的兼容图像。

<img> 元素有两个用途：

1. 它描述图像的尺寸和其他属性及其呈现方式。
2. 当所提供的 <source> 元素都无法提供可用图像时，它提供了一个备用方案。

<picture> 的常见用例

• 艺术指导。根据不同的 media 条件裁剪或修改图像（例如，在较小的显示器上加载细节过多图像的简化版本）。

• 提供替代图像格式，以应对某些格式不受支持的情况。

  注意：例如，像 AVIF 或 WEBP 这样的新格式有许多优点，但可能不被浏览器支持。支持的图像格式列表可以在以下位置找到：图像文件类型和格式指南。

• 通过为查看者的显示器加载最合适的图像，节省带宽并加快页面加载时间。

如果为高 DPI (Retina) 显示器提供更高密度的图像版本，请改用 <img> 元素上的 srcset。这样，浏览器可以在数据节省模式下选择较低密度的版本，您无需编写显式的 media 条件。

属性

此元素仅包含全局属性。

用法说明

您可以使用 object-position 属性调整图像在元素框架内的位置，并使用 object-fit 属性控制图像如何调整大小以适应框架。

示例

这些示例演示了 <source> 元素的不同属性如何改变 <picture> 内部图像的选择。

media 属性

media 属性指定一个媒体条件（类似于媒体查询），用户代理将为每个 <source> 元素评估该条件。

如果 <source> 的媒体条件评估为 false，浏览器会跳过它并评估 <picture> 内的下一个元素。

<picture>
  <source srcset="mdn-logo-wide.png" media="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

srcset 属性

srcset 属性用于根据大小或显示器的像素密度提供可能的图像列表。

它由逗号分隔的图像描述符列表组成。每个图像描述符由图像的 URL 组成，以及以下两者之一：

• 一个宽度描述符，后跟一个 w（例如 300w）；或者
• 一个像素密度描述符，后跟一个 x（例如 2x），用于为高 DPI 屏幕提供高分辨率图像。

请务必注意：

• 宽度和像素密度描述符不应同时使用
• 缺失像素密度描述符表示 1x
• 不允许重复描述符值 (2x & 2x, 100w & 100w)

以下示例演示了 srcset 属性与 <source> 元素一起使用以指定高密度和标准分辨率图像

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>

srcset 属性也可以在 <img> 元素上使用，而无需 <picture> 元素。以下示例演示了如何使用 srcset 属性分别指定标准分辨率和高密度图像

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs logo" />

sizes 属性

<source> 元素的 sizes 属性允许您指定一组媒体条件-长度对，并指示每种条件下的图像显示尺寸。这有助于浏览器从 srcset 属性中选择最合适的图像，该属性列出了具有其固有宽度的图像。

浏览器在下载任何图像之前评估 sizes 属性中的媒体条件。有关更多信息，请参阅 <img> 和 <source> 元素的 sizes 属性。

例如

<picture>
  <source
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="fallback.jpg" alt="Example image" />
</picture>

在此示例中

• 如果视口宽度小于或等于 600 像素，则插槽大小为 400 像素；否则为 800 像素。
• 浏览器将插槽大小乘以设备像素比，以确定理想的图像宽度，然后从 srcset 中选择最接近的可用图像。

如果没有 sizes，浏览器将使用图像的默认大小，即其像素尺寸所指定的大小。这可能不适用于所有设备，尤其是当图像在不同屏幕尺寸或不同上下文中显示时。

请注意，sizes 仅在 srcset 提供了宽度尺寸描述符而不是像素比值（例如 200w 而不是 2x）时才有效。有关使用 srcset 的更多信息，请参阅响应式图像文档。

type 属性

type 属性指定 <source> 元素的 srcset 属性中资源 URL 的 MIME 类型。如果用户代理不支持给定类型，则跳过 <source> 元素。

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

技术摘要

规范

浏览器兼容性

另见

• <img> 元素
• <source> 元素
• 图像在其框架内的定位和尺寸调整：object-position 和 object-fit
• 图像文件类型和格式指南