為什么要用 picture 標(biāo)簽代替 img 標(biāo)簽？
本文最初發(fā)布于 Medium 網(wǎng)站，經(jīng)原作者授權(quán)由 InfoQ 中文站翻譯并分享。
在用戶界面中使用圖像和動畫已成為現(xiàn)代 Web 應(yīng)用程序中的常見情況。盡管這些現(xiàn)代設(shè)計都致力于改善應(yīng)用程序的用戶體驗，但如果這些圖像在所有設(shè)備上都沒有良好的響應(yīng)，事情就會適得其反。
作為開發(fā)人員，我們必須滿足所有這些要求。但大多數(shù)時候，由于我們正在尋求更高級別的解決方案，因此會忽略一些可能會帶來巨大影響的小事。
在 picture 標(biāo)簽和 img 標(biāo)簽之間做選擇可能是一個很小的決策，但如果你做出了正確的選擇，就能改善用戶體驗和性能。
本文將討論 picture 和 img 標(biāo)簽之間的區(qū)別，以及 picture 標(biāo)簽比 img 標(biāo)簽更好用的原因所在。
下次當(dāng)你創(chuàng)建一個 React 圖像組件時，請一定要在其中實現(xiàn)你即將在本文中學(xué)習(xí)的最佳實踐。根據(jù)接收到的 props 返回正確的標(biāo)簽，并處理好所有必要的回退。你甚至可以在 Bit.dev 的組件中心上共享它，這樣你的團隊和你自己將來都能重用它。這樣，你就會擁有一個優(yōu)化極佳的圖像組件，可以毫不猶豫地用在所有 Web 項目中。
眾所周知，很長一段時間以來，img 標(biāo)簽一直是 HTML 的核心元素之一，它的簡單性和可用性是毋庸置疑的。
然而，隨著各種屏幕尺寸、分辨率的設(shè)備和復(fù)雜用戶需求的發(fā)展，img 標(biāo)簽的響應(yīng)性和在多設(shè)備應(yīng)用中使用的能力開始受到質(zhì)疑。
所有這些問題可以歸結(jié)為兩大方面：
分辨率切換——為小屏幕設(shè)備提供較小尺寸圖像的問題。
圖像切換——在不同屏幕上顯示不同圖像的問題。
現(xiàn)在，我們來看看如何解決這些問題，以及 picture 標(biāo)簽的其他特性。
如前所述，當(dāng)今的網(wǎng)頁設(shè)計師經(jīng)常使用高分辨率圖像來增加用戶吸引力。但是作為開發(fā)人員，我們必須非常小心地選擇正確的 HTML 元素。
假設(shè)你對高分辨率圖像使用簡單的 Img 標(biāo)簽。在這種情況下，運行你應(yīng)用程序的每臺設(shè)備都會使用相同的圖像，并且肯定會導(dǎo)致屏幕分辨率較低的設(shè)備（如移動設(shè)備）出現(xiàn)性能問題。
這可能會導(dǎo)致更長的圖像加載時間以及從上到下一塊一塊地圖像加載。
<picture>
<source
srcset="small-car-image.jpg 400w,
medium-car-image.jpg 800w,
large-car-image.jpg 1200w"
sizes="(min-width: 1280px) 1200px,
(min-width: 768px) 400px,
100vw">
<img src="medium-car-image.jpg" alt="Car">
</picture>srcset 屬性接收多個圖像，其寬度都以像素為單位，瀏覽器使用這些值在提供的圖像之間進(jìn)行選擇。在上面的示例中，同一圖像有 3 個版本，具有 3 種不同的尺寸。
Sizes 屬性定義圖像將在屏幕上占據(jù)的空間。在上面的示例中，如果屏幕的最小寬度為 1280px，則圖像將占據(jù) 1200px。
話雖如此，建議不要僅將 picture 標(biāo)簽用于分辨率切換，因為可以使用更新版本的 Img 標(biāo)簽（具有更多的瀏覽器支持）來實現(xiàn)此目的。
<img srcset="small-car-image.jpg 400w,
medium-car-image.jpg 800w,
large-car-image.jpg 1200w"
sizes="(min-width: 1280px) 1200px,
(min-width: 768px) 400px,
100vw"
src="medium-car-image.jpg" alt="Car">
但在大多數(shù)情況下，我們需要同時處理“分辨率切換”和“圖像切換”，并且 picture 標(biāo)簽是最好的解決方案。
因此，讓我們看看如何使用 picture 標(biāo)簽解決圖像切換問題。
圖像切換背后的主要思想是根據(jù)設(shè)備的屏幕尺寸顯示不同的圖像。在大多數(shù)情況下，切換到移動設(shè)備時，在大屏幕上看起來很棒的圖像可能會被裁剪或顯得很小。
我們可以為不同的屏幕尺寸提供不同版本的圖像來解決這一問題。這些不同的版本可以是同一圖像的橫向，縱向或任何自定義版本。
<picture>
<source ....>
<source ....>
<source ....>
</picture><picture>
<source media="(orientation: landscape)"
srcset="land-small-car-image.jpg 200w,
land-medium-car-image.jpg 600w,
land-large-car-image.jpg 1000w"
sizes="(min-width: 700px) 500px,
(min-width: 600px) 400px,
100vw">
<source media="(orientation: portrait)"
srcset="port-small-car-image.jpg 700w,
port-medium-car-image.jpg 1200w,
port-large-car-image.jpg 1600w"
sizes="(min-width: 768px) 700px,
(min-width: 1024px) 600px,
500px">
<img src="land-medium-car-image.jpg" alt="Car">
</picture><picture>
<source media="(max-width: 767px)" ....>
<source media="(min-width: 768px)" ....>
</picture>最后一個 img 標(biāo)簽用于向后兼容不支持 picture 標(biāo)簽的瀏覽器。
隨著技術(shù)的飛速發(fā)展，新的圖像格式也在不斷涌現(xiàn)。其中一些格式（例如 webp、svg 和 avif）提供了更高的用戶體驗水平。
另一方面，某些瀏覽器對這些現(xiàn)代圖像類型存在限制，如果我們不使用兼容的圖像類型，事情將會適得其反。
但是，我們可以使用 Picture 標(biāo)簽輕松解決這個問題，因為它允許我們在其中包含多個來源。
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="test image">
</picture>
上面的示例包括 avif、webp 和 png 格式的三種圖像類型。首先，瀏覽器將嘗試 avif 格式；如果失敗，則將嘗試 webp 格式。如果瀏覽器不支持這兩種方式，它將使用 png 圖像。
Chrome 宣布“DevTools 將在 Rendering 選項卡中提供兩個新的仿真，以模擬部分受支持的圖像類型”后，picture 標(biāo)簽用起來就更有意思了。
從 Chrome 88 開始，你可以使用 Chrome DevTools 檢查瀏覽器與圖像類型的兼容性。
使用 ChromeDevTools 進(jìn)行圖像兼容性仿真
盡管我們討論了為什么 picture 標(biāo)簽比 img 標(biāo)簽更好用的原因，但我必須堅持一點，那就是 img 標(biāo)簽并沒有消亡，或者說不會很快消亡。
如果我們能明智地使用 img 提供的屬性，如 srcset 和 size，則可以從中獲得最大收益。例如，我們可以只使用 img 標(biāo)簽來解決“分辨率切換”問題。
另一方面，我們可以使用 picture 標(biāo)簽的媒體查詢和其他屬性輕松實現(xiàn)分辨率切換和圖像切換。
用于部分受支持的圖像類型和 Chrome DevTools 的支持可以被認(rèn)為是 picture 標(biāo)簽的額外優(yōu)勢。
但是，這兩種元素各有利弊。因此，我們必須根據(jù)我們的需求仔細(xì)考慮和使用最合適的元素。
謝謝你的閱讀！
https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b
最后
歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個專業(yè)的技術(shù)人...
