<picture>: 圖片元素

基線廣泛可用

此功能已成熟穩定，可在許多裝置和瀏覽器版本中使用。自 2016 年 3 月.

<picture> HTML 元素包含零個或多個 <source> 元素和一個 <img> 元素，以便為不同的顯示/裝置場景提供影像的備用版本。

瀏覽器將考慮每個子 <source> 元素，並在其中選擇最佳匹配項。如果找不到匹配項，或者瀏覽器不支援 <picture> 元素，則將選擇 <img> 元素的 src 屬性的 URL。然後，所選影像將在 <img> 元素佔用的空間中呈現。

嘗試一下

為了確定要載入哪個 URL，使用者代理將檢查每個 <source> 的 srcset、media 和 type 屬性，以選擇與當前佈局和顯示裝置功能最匹配的相容影像。

<img> 元素有兩個作用

它描述了影像及其呈現的大小和其他屬性。
如果所有提供的<source>元素都無法提供可用的影像，則它提供一個備用方案。

<picture> 的常見用例

藝術指導。 針對不同的media條件裁剪或修改影像（例如，在較小的顯示器上載入一個沒有太多細節的影像的簡化版本）。
提供替代影像格式，用於某些格式不受支援的情況。

注意： 例如，像 AVIF 或 WEBP 這樣的新格式有很多優勢，但可能不受瀏覽器支援。支援的影像格式列表可以在以下位置找到：影像檔案型別和格式指南。
透過為觀看者的顯示器載入最合適的影像來節省頻寬並加快頁面載入時間。

如果要為高 DPI（視網膜）顯示器提供更高密度的影像版本，請在<img>元素上使用 srcset。這使瀏覽器可以在節省資料模式下選擇較低密度的版本，而且您不必編寫顯式的media條件。

屬性

此元素僅包含全域性屬性。

使用說明

您可以使用 object-position 屬性來調整影像在元素框架內的定位，並使用 object-fit 屬性來控制影像如何調整大小以適合框架。

注意： 將這些屬性應用於子<img>元素，而不是<picture>元素。

示例

這些示例演示了 <source> 元素的不同屬性如何改變<picture> 內影像的選擇。

media 屬性

media 屬性指定了一個媒體條件（類似於媒體查詢），使用者代理會為每個 <source> 元素評估該條件。

如果 <source> 的媒體條件評估為false，瀏覽器會跳過它並評估<picture> 內的下一個元素。

html

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-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>元素來指定高密度和標準解析度影像

html

<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屬性分別指定標準解析度和高密度影像

html

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

sizes屬性在使用 srcset 時不是必需的，但建議使用它，以便為瀏覽器提供額外的資訊，幫助它選擇最佳影像源。

如果沒有 sizes，瀏覽器將使用影像的預設大小，如其以畫素為單位的尺寸所指定。這可能不是所有裝置的最佳選擇，尤其是在影像以不同螢幕尺寸或在不同上下文環境中顯示時。

請注意，只有在使用 srcset 時提供寬度維度描述符（例如 200w，而不是 2x），sizes 才會生效。有關使用srcset的更多資訊，請參閱響應式影像文件。

type 屬性

type 屬性指定 MIME 型別，用於 <source> 元素的srcset屬性中的資源 URL。如果使用者代理不支援給定的型別，則會跳過 <source> 元素。

html

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

技術摘要

內容類別	流內容，短語內容，嵌入內容
允許的內容	零個或多個 `<source>` 元素，後跟一個 `<img>` 元素，可以選擇與支援指令碼的元素混合。
標籤省略	無，起始標籤和結束標籤都是必需的。
允許的父級	允許嵌入內容的任何元素。
隱式 ARIA 角色	沒有對應的角色
允許的 ARIA 角色	不允許`role`。
DOM 介面	`HTMLPictureElement`

規範

規範
HTML 標準 # the-picture-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

<img> 元素
<source> 元素
將圖片定位和調整大小以適應其框架：object-position 和 object-fit
影像檔案型別和格式指南