<picture>: The Picture element

HTML <picture> 元素 包含了零或零以上個 <source> (en-US) 元素以及一個 <img> (en-US) 元素，以為不同顯示器/裝置提供同張圖片的不同版本。

瀏覽器將會考慮每個 <source> 元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 <picture> 元素——則 <img> 屬性的 URL 會被選擇。被選擇的圖片將會在 <img> 元素存在的位置顯示。

嘗試一下

為了決定載入哪一個 URL，user agent (en-US) 會檢視每一個 <source> 的 srcset (en-US)、media (en-US) 以及 type (en-US) 屬性，以選出最適合當前版面以及顯示裝置支援度的圖片。

<img> 有兩個作用：

  1. 它描述了該圖片的尺寸等屬性以及呈現（presentation）。
  2. 在所有列出的 <source> 都不能提供可用圖片的情況下的 fallback。

<picture> 的常見使用案例：

  • 圖像方向（art direction）： 根據不同的 media 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片）
  • **提供替代的圖片格式：**以應對某些特定格式不被支援的情況
  • **節省頻寬並加速頁面載入速度：**透過針對觀看者的裝置載入最適當的圖片做到這點

如果是要為高 DPI （Retina）螢幕提供圖片的高解析度版本時，可改在使用 <img> 上使用 srcset (en-US) 屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本，這樣你就不用特地指定 media 條件。

Content categories Flow content, phrasing content, embedded content
Permitted content Zero or more <source> (en-US) elements, followed by one <img> (en-US) element, optionally intermixed with script-supporting elements.
標籤省略 不允許，開始和結束標籤都是必須的。
Permitted parents Any element that allows embedded content.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLPictureElement (en-US)

屬性

此元素只包含 global attributes (en-US).

用法筆記

你可以使用 object-position (en-US) 屬性來在元素的 frame 內調整圖片位置，也可以用 object-fit (en-US) 屬性控制圖片在 frame 內如何調整大小。

備註： 在子元素 <img> 上使用這些屬性，而不是 <picture> 元素.

範例

以下例子示範如何根據 <source> (en-US) 元素不同的屬性設定選擇 <picture> 中的不同圖片。

media 屬性

media 屬性指定特定的媒體類型（跟 media query 很像），讓 user agent 可對每個 <source> (en-US) 元素作出判斷。

如果 <source> (en-US) 的指定媒體類型被判斷為 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 (en-US) 屬性用來提供根據大小區分的可能圖片清單。

它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成（擇一）：

  • 寬度，結尾為 w (例如 300w)； 或是
  • 像素密度，結尾為 x (例如 2x)，以為高 DPI 螢幕提供高解析度圖片
html
<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x" />
  <source srcset="logo-480.png, logo-480-2x.png 2x" />
  <img src="logo-320.png" alt="logo" />
</picture>

type 屬性

type 屬性為 <source> (en-US) 元素中 srcset 屬性的資源 URL 指定 MIME type (en-US) 。如果 user agent 不支援該 type 的話，此 <source> (en-US) 元素會被略過。

html
<picture>
  <source srcset="logo.webp" type="image/webp" />
  <img src="logo.png" alt="logo" />
</picture>

規格

Specification
HTML Standard
# the-picture-element

瀏覽器支援度

BCD tables only load in the browser

相關資源