圖片元素

先前的單元說明瞭 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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async"
    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" loading="eager" decoding="sync">
</picture>

請注意，您無法根據圖片來源變更 alt 屬性。您需要編寫 alt 屬性，用於說明完整大小圖片和裁剪的圖片。

大部分的回應式圖片可能不需要使用 picture 元素，因為 img 元素上的 srcset 和 sizes 屬性已涵蓋許多用途。但是，如果需要更精細的控制，picture 元素是一項強大的工具。

您可能不需要解決上述任一種圖片，就是圖示。這是後續步驟。

隨堂測驗

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