響應式圖片 <picture>
<picture> 響應式圖片元素可以在 HTML 裡放入適合不同解析度的圖片，當符合特定解析度時，就會顯示對應的圖片 ( 俗稱的響應式設計 )，這篇教學會介紹 <picture> 響應式圖片元素以及相關用法。
認識 <audio>
<picture> 響應式圖片元素可以在 HTML 裡使用 <source> 放入適合不同解析度的圖片，當符合特定解析度時，就會顯示對應的圖片 ( 俗稱的響應式設計 )。
<picture>屬於「容器元素」，需要有「起始標籤」以及「結束標籤」。<picture>顯示類型為「inline-block 行內元素裡包覆塊級元素」，預設不會強制換行，寬度超過父元素寬度才會換行。<source>只能是<video>或<audio>的子元素。
使用 <picture> 需要同時使用 <source> 和 <img> 元素，<source> 具有 srcset 和 media 屬性，符合指定螢幕的解析度時 ( media )，就會顯示對應的圖片 ( srcset )，如果不符合條件，則會顯示 <img> 的圖片，基本用法如下：
<picture>
<!-- 最小寬度 400px 時顯示 photo-400.jpg -->
<source srcset="photo-400.jpg" media="(min-width:400px)">
<!-- 最小寬度 300px 時顯示 photo-300.jpg -->
<source srcset="photo-300.jpg" media="(min-width:300px)">
<!-- 最小寬度小於 300px 時顯示 photo.jpg -->
<img src="photo.jpg">
</picture>
例如下方的 HTML 開啟後，會使用 <picture> 在網頁中放入三張適合不同解析度的圖片，當畫面寬度不同時，就會顯示不同圖片 ( 圖片來源：Google Doodles )。
<picture>
<source srcset="https://www.google.com/logos/doodles/2022/st-andrews-day-2022-6753651837109549-2x.png" media="(min-width:400px)">
<source srcset="https://www.google.com/logos/2022/lawson/r1130/lawson_cta.png" media="(min-width:300px)">
<img src="https://www.google.com/logos/doodles/2022/thanksgiving-2022-6753651837109542.5-2x.png" width="200">
</picture>
<picture> 樣式
使用 <picture> 之後，等同於將對應的網址放入 <img> 的 src 屬性中，因此只要設定 <img> 的樣式，就是設定該張圖片的樣式，例如下方的 HTML 執行後，不論圖片如何變化，都會加上寬度 5px 的黑色邊框。
<picture>
<source srcset="https://www.google.com/logos/doodles/2022/st-andrews-day-2022-6753651837109549-2x.png" media="(min-width:400px)">
<source srcset="https://www.google.com/logos/2022/lawson/r1130/lawson_cta.png" media="(min-width:300px)">
<img src="https://www.google.com/logos/doodles/2022/thanksgiving-2022-6753651837109542.5-2x.png"
style="border:5px solid #000; width:200px;">
</picture>
<picutre> 支援屬性
<picutre> 本身沒有屬性設定，但需要設定 <source> 的屬性，可以設定的屬性如下：
| 屬性 | 說明 |
|---|---|
| media | 指定 media query 條件，如果不符合，就執行下一個。 |
| srcset | 指定一張或多張不同尺寸大小的圖片。 |
| type | 指定圖片的檔案格式 ( 例如 image/webp 或 image/jpg )，如果不符合，就執行下一個。 |
以下方的 HTML 為例，網頁開啟後會預先讀取 webp 檔案，如果不支援或檔案不存在，則使用 jpg 檔案。
<picture>
<source srcset="photo.webp" type="image/webp>
<img src="photo.jpg">
</picture>
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～