初學者指南：HTML <picture> 標籤
更新日期： 2024 年 10 月 15 日
在網頁開發中，確保圖片能夠適應各種不同設備和螢幕大小，是提高用戶體驗的關鍵之一。
HTML 提供了一個強大的工具來幫助解決這個問題，那就是 <picture> 標籤。
<picture> 標籤讓開發者可以根據用戶設備、螢幕分辨率或網路條件來提供不同的圖片資源。
這篇文章將幫助你了解如何使用 <picture> 標籤，讓你的網頁圖片更加靈活和高效。
什麼是 <picture> 標籤？
<picture> 標籤是 HTML5 引入的標籤，用來實現圖片的響應式設計。
透過使用 <picture> 標籤，你可以在同一位置提供多個不同的圖片選項，讓瀏覽器自動選擇最合適的圖片來顯示。
這對於減少流量和提高網站性能非常有幫助，尤其是在用戶使用不同設備（例如手機、平板、桌面電腦）時。
基本語法
以下是 <picture> 標籤的基本結構：
<picture>
<source srcset="example-large.jpg" media="(min-width: 800px)">
<source srcset="example-medium.jpg" media="(min-width: 400px)">
<img src="example-small.jpg" alt="描述性文字">
</picture>在這段代碼中，我們使用 <picture> 標籤來提供多個圖片選項，並讓瀏覽器根據不同的螢幕大小選擇最合適的圖片。
最終顯示的圖片是 <img> 標籤中的 src，它是瀏覽器無法匹配其他選項時的後備選擇。
<picture> 標籤的組成部分
<source> 標籤
<source> 標籤用於指定不同條件下應使用的圖片資源。它通常包含以下屬性：
srcset：指定圖片的路徑。media：定義媒體查詢條件，類似於 CSS 中的媒體查詢，可以根據螢幕寬度等條件選擇合適的圖片。
<img> 標籤
<img> 標籤是 <picture> 標籤的後備方案，用來在所有 <source> 都不匹配時顯示圖片。
<img> 標籤中的 src 屬性指定了一個默認的圖片，而 alt 屬性提供替代文本，便於輔助技術（如螢幕閱讀器）理解圖片內容。
例子
<picture>
<source srcset="high-res-image.jpg" media="(min-width: 1200px)">
<source srcset="medium-res-image.jpg" media="(min-width: 600px)">
<img src="low-res-image.jpg" alt="描述性文字">
</picture>這段代碼展示了如何使用 <picture> 標籤根據螢幕的寬度選擇不同的圖片資源：
- 當螢幕寬度超過 1200px 時，顯示高解析度的圖片。
- 當螢幕寬度介於 600px 到 1200px 之間時，顯示中等解析度的圖片。
- 當螢幕寬度小於 600px 時，使用
<img>中的低解析度圖片。
使用情境
響應式圖片
當你需要為不同設備提供不同解析度的圖片時，<picture> 標籤是一個非常實用的工具。
例如，在桌面端使用高解析度圖片，而在移動端使用低解析度圖片，以減少網頁的加載時間。
藝術方向的圖片
有時候，同一圖片的不同部分可能需要根據設備的大小進行裁剪。
在這種情況下，<picture> 標籤可以幫助你提供不同版本的圖片，以便最佳顯示每個版本的重點內容。
例子：藝術方向的圖片
<picture>
<source srcset="banner-wide.jpg" media="(min-width: 800px)">
<source srcset="banner-narrow.jpg" media="(max-width: 799px)">
<img src="banner-default.jpg" alt="網站橫幅">
</picture>在這個例子中，我們提供了兩個不同的橫幅圖片：
banner-wide.jpg：適合寬螢幕的桌面顯示。banner-narrow.jpg：適合窄螢幕的手機顯示。banner-default.jpg：默認的後備圖片。
常見問題
<picture> 標籤與 <img> 標籤的區別是什麼？
<picture> 標籤和 <img> 標籤之間的主要區別在於，<picture> 更加靈活，允許根據不同的媒體查詢條件（例如螢幕大小）來選擇適合的圖片，而 <img> 標籤通常只提供一個基本的圖片來源。
當你使用 <img> 的 srcset 屬性時，瀏覽器可以根據設備的解析度選擇最適合的圖片資源，但它不具備 <picture> 所提供的基於媒體查詢的更精細的控制。
為什麼要使用 <picture> 標籤？
使用 <picture> 標籤可以更好地控制圖片，在不同設備和條件下的顯示效果。
例如，你可以根據螢幕大小、設備像素比或其他條件來指定不同的圖片，這能夠提供更好的用戶體驗和更優的性能。
是否所有瀏覽器都支持 <picture> 標籤？
大多數現代瀏覽器都支持 <picture> 標籤，但對於一些較舊的瀏覽器，可能需要提供回退方案。
這就是為什麼 <img> 標籤在 <picture> 中是必需的，因為它確保了在不支持 <picture> 的情況下，至少還能顯示圖片。
結論
HTML 的 <picture> 標籤是一個強大的工具，讓我們可以根據設備和顯示條件來選擇合適的圖片資源。
這有助於提高網站的性能和用戶體驗，特別是在移動端設備上。
通過正確地使用 <picture> 標籤，你可以讓你的網站圖片變得更靈活，並確保用戶在各種設備上都能看到最合適的圖片。
希望這篇文章幫助你了解如何使用 <picture> 標籤來提升圖片顯示效果。
如果還有其他問題，隨時告訴我，我們可以一起學習更多有關 HTML 的知識！