如何使用 HTML 的 picture 元素

<picture> 是 HTML5 包覆圖片用的 tag。可以搭配 source 來因應不同情況下（解析度、寬度），甚至是相容性（webp、jpeg、svg、png……）來顯示的圖片。

現況

基本上所有的瀏覽器都支援此 HTML5 的 tag，除了 IE ( Edge )系列要更新到 Edge 13 之後的版本才能使用。不過就算不支援也只是回到原先的 img 而已，沒有什麼大礙。

各大瀏覽器對於 picture 的相容性 ( caniuse.com ) - 於 2017 年 6 月

使用方法

不同的圖片類型：

<source srcset="img/text.avif" type="image/avif">
<source srcset="img/text.webp" type="image/webp">

不同瀏覽器寬度：

<source media="(min-width: 768px)" srcset="text-768.jpg">
<source media="(min-width: 360px)" srcset="text-360.jpg">

picture 會由上到下找尋吻合瀏覽器現況的 source 值，若第一個 source 值不符合使用的瀏覽器的支援度，才會去找第二個、第三個……，以此類推，都不適用才會直接套用原本寫在 img 的圖片。

實例

<picture>
  <source media="(min-width: 1440px)" srcset="https://api.fnkr.net/testimg/1920x400/9a91f2/FFF/?text=min-width-1440px">
  <source media="(min-width: 768px)" srcset="https://api.fnkr.net/testimg/1440x300/c7254e/FFF/?text=min-width-992px">
  <img src="https://api.fnkr.net/testimg/350x200/9a91f2/FFF/?text=other" alt="test" style="width:auto;">
</picture>

請試著變動瀏覽器寬度

當然，source 也能跟 img 的 srcset 一樣使用不同解析度的圖和 sizes 。另外，當 img srcset 之中的圖片長寬比例不一時，也可以用 picture 解決。

缺點

雖然它還能解決 webp 相容性的問題，但缺點卻顯而易見：無條件載入 img tag 的圖片。就算瀏覽器採用了 source tag 的 webp 圖片，它還是會載入 img 裡面設定的圖片，增加不必要的流量，拖慢網頁載入時間。

相關連結：W3C picture