<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
• 影像檔案型別和格式指南