圖片元素

上一個單元說明如何使用 srcset 屬性，為同一張圖片提供不同大小的版本。瀏覽器隨後就能決定要使用哪個版本。如要完全變更圖片，則需要 picture 元素。

srcset 是以 src 屬性為基礎，而 picture 元素則是以 img 元素為基礎。picture 元素會包裝 img 元素。

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

如果 picture 元素內沒有巢狀 img 元素，picture 元素就不會運作。

與 srcset 屬性類似，picture 元素會更新該 img 元素中的 src 屬性值。不同之處在於，srcset 屬性會向瀏覽器提供建議，而 picture 元素則會提供指令。一切由你掌控。

source

您可以在 picture 元素內指定多個 source 元素，每個元素都有自己的 srcset 屬性。瀏覽器接著會執行第一個可執行的動作。

圖片格式

在這個範例中，有三張不同格式的圖片：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

第一個 source 元素指向新的 AVIF 格式圖片。如果瀏覽器可以顯示 AVIF 圖片，就會選擇該圖片檔案。否則，系統會移至下一個 source 元素。

第二個 source 元素指向WebP 格式的圖片。如果瀏覽器可以顯示 WebP 圖片，就會使用該圖片檔案。

否則瀏覽器會改用 img 元素 src 屬性中的圖片檔案。該圖片為 JPEG 格式。

也就是說，您可以使用新的圖片格式，同時維持回溯相容性。

在該範例中，type 屬性會告知瀏覽器指定的圖片格式類型。

圖片大小

除了切換圖片格式，你也可以切換圖片大小。使用 media 屬性，指示瀏覽器顯示圖片的寬度。在 media 屬性中加入媒體查詢。

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

這裡您是告訴瀏覽器，如果可視區域寬度大於 75em，就必須使用大圖片。介於 40em 和 75em 之間時，瀏覽器必須使用中型圖片。瀏覽器必須使用下方 40em 的小圖片。

這與在 img 元素上使用 srcset 和 sizes 屬性不同。在這種情況下，您是向瀏覽器提供建議。source 元素比較像是指令，而非建議。

您也可以在 source 元素的 srcset 屬性中使用像素密度描述元。

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

在該範例中，您仍會告知瀏覽器在不同中斷點應執行的動作，但現在瀏覽器可以選擇最適合裝置像素密度的圖片。

裁剪

如果您只需要放送相同圖片的不同大小版本，srcset 是最佳選擇。但如果圖片縮小後效果不佳，可以改用裁剪後的圖片。

不同圖片的寬高比可能不同，以更符合情境。舉例來說，您可能想在行動瀏覽器上放送窄而高的裁剪版本，在電腦瀏覽器上放送寬而短的裁剪版本。

以下範例中的主頁橫幅會根據可視區域寬度，變更內容和形狀。在每個 source 元素中新增 width 和 height 屬性。

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

請注意，您無法變更 alt 屬性，具體視圖片來源而定。您需要編寫 alt 屬性，同時描述完整尺寸圖片和裁剪圖片。

在大多數情況下，您可能不需要使用回應式圖片的 picture 元素，因為 img 元素上的 srcset 和 sizes 屬性涵蓋許多用途。不過，如果需要更精細的控制，picture 元素就是強大的工具。

有一種圖片可能不需要上述任一解決方案：圖示。後續步驟。

隨堂測驗

測試您對圖片元素的瞭解程度