HTML - <picture> 標籤

<picture> 標籤用途

• 多用在響應式網頁設計
• 可根據不同螢幕尺寸載入圖片
• 可根據瀏覽器支援的格式來載入不同格式的圖片
  

<picture> 語法範例

<picture> 容器裡面使用多個 <source> 和一個 <img> 來設定。
先從 <source> 去找有沒有匹配的圖片，沒有的話則使用 <img> 設定的圖片。

<picture>
  <source srcset="/photo/dog-600.jpg"
          media="(min-width: 600px)">
  <img src="/photo/dog.jpg">
</picture>

<source> 標籤屬性

• media : 用來設定 media query 條件。
• srcset : 設定一張或多張(逗點分隔)不同尺寸的圖片。尺寸可以使用圖片像素寬度(單位 w)或螢幕解析度(單位 x)。
• type : 指定圖片的檔案格式，當瀏覽器不支援此格式時會忽略這張圖片。

  <picture>
    <source srcset="/photo/dog-600.jpg 600w, /photo/dog-600-2.jpg 2x"
            srcset="/photo/dog-300.jpg 300w, /photo/dog-600-1.5.jpg 1.5x"
            media="(min-width: 600px)"
            type="image/jpeg">
    <img src="/photo/dog.png">
  </picture>