HTML <picture> 響應式圖片 (Responsive Images) - 自動載入不同尺寸和檔案格式的圖片

<picture> 標籤 (tag) 有下面這些用途，常被應用在響應式網頁設計 (Responsive web design, RWD) 或手機行動版網頁設計：

• 讓瀏覽器 (browser) 可以根據不同的螢幕條件下 (media conditions)，自動載入不同尺寸 (size) 的圖片
• 讓瀏覽器可以根據自己對圖片格式 (format) 的支援度，自動載入相容格式的圖片，像是動態判斷載入 webp 或 jpeg

語法範例：

<picture>
  <source srcset="/media/cat-240.jpg"
          media="(min-width: 800px)">
  <img src="/media/cat.jpg">
</picture>

<picture> 本身是一個容器 (container)，裡面用零個或多個 <source> 和一個 <img> 標籤來設定不同的圖片，瀏覽器會先從 <source> 去找有沒匹配 (match) 條件的圖片，如果沒有的話 (或瀏覽器不支援 <picture> 標籤) 則使用 <img> 所設定的圖片。

<source> 用來設定不同條件下使用的圖片

<source> 標籤有下面這些屬性 (attribute) 可以使用：

media

media 用來指定 media query 條件，當 media query 條件不吻合，瀏覽器會繼續往下比對下一個 <source> 或預設使用 <img> 指定的圖片。

使用方法：

<picture>
  <source srcset="logo-wide.png" media="(min-width: 1200px)">
  <source srcset="logo-mid.png" media="(min-width: 600px)">
  <img src="logo-narrow.png">
</picture>

srcset

srcset 屬性可以指定一張或多張不同尺寸大小 (size) 的圖片，瀏覽器會自動判斷當在不同的螢幕寬度 (display width) 或不同的螢幕解析度 (pixel density, display density) 像是高清 retina 螢幕下，自動載入最合適大小的圖片，而指定尺寸可以用實際圖片寬度或螢幕解析度 pixel density 來當單位。

srcset 語法是 "檔案路徑 URL" 空一格 "尺寸大小單位"，如果有多張不同尺寸的圖片則用逗點 (comma-separated) 來分隔開。

使用方法：

<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png">
</picture>

其中單位 w 是指定圖片實際的相素 (pixel) 寬度；而單位 x 是採螢幕解析度也就是 pixel density 來當單位，像是現在的智慧型手機的 retina 螢幕解析度有著高於一般螢幕 2x 3x 4x 的解析度。

type

type 屬性可以指定圖片的檔案格式 MIME type，用來說明這張圖是 webp 或 jpeg 的圖片，當瀏覽器不支援此格式時會自動忽略這張圖，所以說你可以利用 type 來做到不同瀏覽器載入不同格式的圖片。

使用方法：

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png">
</picture>