圖片元素

先前的模組展示了 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 元素是強大的工具。

某張圖片中，您可能不需要任一解決方案：圖示。這就是後續步驟。

隨堂測驗

測試您對圖片元素的瞭解