HTML 響應式影像 picture：依裝置切換圖片來源

Q: picture 裡的 img 可以省略嗎？

不行。所有 source 都不匹配時就靠它顯示，alt 也是寫在 img 上。少了它，這張圖在不支援或條件都不符的情況下會完全不見。

Q: picture 和 img 的 srcset 該怎麼選？

同一張圖只是要不同尺寸，用 img 搭配 srcset 就夠，讓瀏覽器自行決定；需要在不同裝置換成裁切方式不同的圖，或要提供 WebP 這類格式備援時，才需要 picture。

常用在響應式設計中，不必再以一張影像來通吃所有媒體裝置。在 <picture> 內還有兩個子元素，分別為 <source>、<img>。前者用 media 或 type 列出候選來源，後者則是不可省略的最後備援。

瀏覽器會依據媒體查詢（Media Query）與目前視窗寬度相符的第一個子元素 <source>，顯示適當的影像；若無相符者，會再查找下一個的子元素 <source> 進行匹配。

<img> 為最後一個子元素是必備的，當所有 <source> 都不匹配時，就會以 <img> 為主。

html

<picture>
  <source media="(min-width: 1025px)" srcset="./images/css-l.png">
  <source media="(min-width: 769px)" srcset="./images/css-m.png">
  <img src="./images/css-s.png" alt="CSS">
</picture>

小提醒

<source> 由上往下比對，找到第一個符合的就採用，因此條件較嚴格或尺寸較大的要寫在前面。

media

用來設定媒體查詢的條件。若不相符，便會往下一個進行匹配。

srcset

指定匹配的影像來源。

type

指定圖片格式，讓不支援的瀏覽器自動跳過：

html

<picture>
  <source srcset="./images/hero.avif" type="image/avif">
  <source srcset="./images/hero.webp" type="image/webp">
  <img src="./images/hero.jpg" alt="活動主視覺" width="1200" height="630">
</picture>

支援 AVIF 的瀏覽器載入第一個，其餘退回 WebP，都不支援就用 JPG。

什麼時候不需要 picture

同一張圖只是要換尺寸時，用 <img> 搭配 srcset 與 sizes 就夠，讓瀏覽器自己依螢幕決定：

html

<img
  src="./images/photo-800.jpg"
  srcset="./images/photo-400.jpg 400w, ./images/photo-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="風景照"
>