前言
Hi, 假日好各位。剛剛在閱歷其他平凡俗子的生活時(俗稱滑手機)，看到人家的 html 中使用了 picture 的 tag，還想說這個人自創標籤超酷的，搜尋之下才自知井底之蛙…，我從來就只會用 <img> 呀!
什麼是 picture 標籤
就一般顯示圖片而言，不太需要分太多種情況，所以直接使用 img 標籤是最快最輕便的；而當我們需要針對螢幕尺寸、圖片格式、解析度等等的需求，則建議可以使用 picture 來做開發。
picture 本身是沒有屬性設定的，需要設定的是在其中的 <source> 裡面
- media: 指定 media query 條件，如不符合就執行下一個。
- srcset: 指定單張或多張不同尺寸圖片。
- type: 指定圖檔的格式 (webp, jpg, png…)，如不符合就執行下一個。
話不多說我們進實作 ▶
img-tag demo
picture-tag demo
這邊的範例是依照畫面寬度去調整顯示的圖片，從 400px 的小火龍 -> 800px 的火恐龍 -> 1200px 的噴火龍。(你可以切換 Result 下方的 1x 0.5x 0.25x 來看變化)
最後在添加一個預備 <img>，當瀏覽器不支援 <picture> 或沒有匹配到 source 條件時會顯示，而寫在 img 中的樣式都會套用到所有圖片中。
結論
- 優先使用
<img>，除非有響應式或多格式需求。 - 如果需要針對不同設備、解析度或瀏覽器條件進行圖片優化，使用
<picture>是最佳選擇。