picture 標(biāo)簽用于根據(jù)不同的設(shè)備特性加載最佳圖片資源，解決 img 標(biāo)簽的局限性。1. 它支持根據(jù)不同媒體查詢選擇圖片；2. 可依據(jù)瀏覽器支持格式（如 webp、avif）加載對應(yīng)資源；3. 實現(xiàn)藝術(shù)方向，即不同屏幕尺寸展示不同內(nèi)容的圖片；4. 配合 srcset 與 sizes 屬性精確控制響應(yīng)式加載；5. 提供 img 標(biāo)簽作為后備方案以確保兼容性；6. 使用時需注意提供完整資源、合理設(shè)置 media、測試兼容性并避免過度優(yōu)化。
picture 標(biāo)簽允許你根據(jù)不同的屏幕尺寸、分辨率或設(shè)備特性，加載不同的圖片資源。它提供了一種更靈活、更語義化的方式來處理響應(yīng)式圖片，優(yōu)于傳統(tǒng)的 img 標(biāo)簽。
響應(yīng)式圖片加載的核心在于根據(jù)用戶的設(shè)備和網(wǎng)絡(luò)環(huán)境，提供最佳的圖片資源。picture 標(biāo)簽通過 source 元素指定不同的圖片資源，瀏覽器會根據(jù) media 屬性選擇最合適的圖片。
為什么需要 picture 標(biāo)簽？img 標(biāo)簽不夠用嗎？
img 標(biāo)簽在簡單的響應(yīng)式圖片場景下可以配合 css 的 srcset 屬性使用，但它存在一些局限性。例如，img 標(biāo)簽無法根據(jù)不同的圖片格式（如 WebP 或 AVIF）進(jìn)行選擇，也無法處理藝術(shù)方向（Art Direction）的問題，即在不同屏幕尺寸下裁剪或呈現(xiàn)不同的圖片內(nèi)容。picture 標(biāo)簽則可以很好地解決這些問題。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
picture 標(biāo)簽的基本結(jié)構(gòu)和屬性
一個基本的 picture 標(biāo)簽結(jié)構(gòu)如下：
<picture> <source media="(max-width: 600px)" srcset="image-small.jpg"> <source media="(max-width: 900px)" srcset="image-medium.jpg"> @@##@@ </picture>
- picture 標(biāo)簽: 容器標(biāo)簽，用于包裹所有的 source 和 img 標(biāo)簽。
- source 標(biāo)簽: 指定不同的圖片資源。
- media 屬性: CSS 媒體查詢，定義何時使用該 source 標(biāo)簽指定的圖片。
- srcset 屬性: 指定圖片資源的 URL。可以指定多個 URL，并用逗號分隔，每個 URL 后面可以跟一個寬度描述符（如 300w）或像素密度描述符（如 2x）。
- type 屬性: 指定圖片的 MIME 類型，例如 image/webp。這允許瀏覽器根據(jù)支持的圖片格式進(jìn)行選擇。
- img 標(biāo)簽: picture 標(biāo)簽的后備方案。如果瀏覽器不支持 picture 標(biāo)簽，或者沒有匹配的 source 標(biāo)簽，則會加載 img 標(biāo)簽指定的圖片。img 標(biāo)簽必須包含 src 和 alt 屬性。
如何使用 picture 標(biāo)簽實現(xiàn)藝術(shù)方向？
藝術(shù)方向指的是在不同的屏幕尺寸下，呈現(xiàn)不同的圖片內(nèi)容，以達(dá)到最佳的視覺效果。例如，在小屏幕上裁剪圖片，突出重點內(nèi)容。
<picture> <source media="(max-width: 600px)" srcset="image-small-cropped.jpg"> <source media="(min-width: 601px)" srcset="image-large.jpg"> @@##@@ </picture>
在這個例子中，當(dāng)屏幕寬度小于等于 600px 時，會加載裁剪后的 image-small-cropped.jpg 圖片，否則加載 image-large.jpg 圖片。
如何使用 picture 標(biāo)簽選擇不同的圖片格式？
現(xiàn)代瀏覽器支持多種圖片格式，如 WebP 和 AVIF，它們通常比 JPEG 和 PNG 具有更好的壓縮率。可以使用 picture 標(biāo)簽根據(jù)瀏覽器支持的格式選擇最佳的圖片資源。
<picture> <source type="image/webp" srcset="image.webp"> <source type="image/avif" srcset="image.avif"> @@##@@ </picture>
瀏覽器會按照 source 標(biāo)簽的順序嘗試加載圖片。如果瀏覽器支持 WebP 格式，則加載 image.webp；如果不支持 WebP 但支持 AVIF，則加載 image.avif；如果兩種格式都不支持，則加載 image.jpg。 注意 type 屬性是必要的，瀏覽器需要它來判斷是否支持該格式，否則會下載所有圖片。
sizes 屬性在 picture 標(biāo)簽中的作用
sizes 屬性與 srcset 屬性配合使用，可以更精確地控制圖片的加載。sizes 屬性定義了圖片在不同屏幕尺寸下所占據(jù)的寬度。
@@##@@
在這個例子中，sizes 屬性告訴瀏覽器：
- 當(dāng)屏幕寬度小于等于 320px 時，圖片占據(jù) 280px 的寬度。
- 當(dāng)屏幕寬度小于等于 480px 時，圖片占據(jù) 440px 的寬度。
- 否則，圖片占據(jù) 800px 的寬度。
瀏覽器會根據(jù) sizes 屬性和 srcset 屬性，選擇最合適的圖片資源。
使用 picture 標(biāo)簽的注意事項
- 確保提供所有必要的圖片資源，包括不同尺寸和格式的圖片。
- 使用合適的 media 屬性，確保在不同的屏幕尺寸下加載正確的圖片。
- 使用 alt 屬性為 img 標(biāo)簽提供描述性文本，這對于 SEO 和可訪問性非常重要。
- 測試你的響應(yīng)式圖片加載方案，確保在不同的設(shè)備和瀏覽器上都能正常工作。
- 避免過度優(yōu)化，不要為了追求極致的性能而犧牲用戶體驗。
picture 標(biāo)簽的兼容性如何？
picture 標(biāo)簽在現(xiàn)代瀏覽器中得到了廣泛支持。對于不支持 picture 標(biāo)簽的舊瀏覽器，可以使用 polyfill 來提供兼容性。例如，可以使用 picturefill.JS 這個 polyfill。
總結(jié)
picture 標(biāo)簽是一個強大的工具，可以讓你更靈活、更語義化地處理響應(yīng)式圖片。通過使用 picture 標(biāo)簽，你可以根據(jù)不同的屏幕尺寸、分辨率和設(shè)備特性，提供最佳的圖片資源，從而提升網(wǎng)站的性能和用戶體驗。 掌握 picture 標(biāo)簽的使用方法，對于前端開發(fā)者來說至關(guān)重要。
.png)
