為什么要用 picture 標(biāo)簽代替 img 標(biāo)簽？

本文最初發(fā)布于 Medium 網(wǎng)站，經(jīng)原作者授權(quán)由 InfoQ 中文站翻譯并分享。

在用戶界面中使用圖像和動(dòng)畫(huà)已成為現(xiàn)代 Web 應(yīng)用程序中的常見(jiàn)情況。盡管這些現(xiàn)代設(shè)計(jì)都致力于改善應(yīng)用程序的用戶體驗(yàn)，但如果這些圖像在所有設(shè)備上都沒(méi)有良好的響應(yīng)，事情就會(huì)適得其反。

作為開(kāi)發(fā)人員，我們必須滿足所有這些要求。但大多數(shù)時(shí)候，由于我們正在尋求更高級(jí)別的解決方案，因此會(huì)忽略一些可能會(huì)帶來(lái)巨大影響的小事。

在 picture 標(biāo)簽和 img 標(biāo)簽之間做選擇可能是一個(gè)很小的決策，但如果你做出了正確的選擇，就能改善用戶體驗(yàn)和性能。

本文將討論 picture 和 img 標(biāo)簽之間的區(qū)別，以及 picture 標(biāo)簽比 img 標(biāo)簽更好用的原因所在。

下次當(dāng)你創(chuàng)建一個(gè) React 圖像組件時(shí)，請(qǐng)一定要在其中實(shí)現(xiàn)你即將在本文中學(xué)習(xí)的最佳實(shí)踐。根據(jù)接收到的 props 返回正確的標(biāo)簽，并處理好所有必要的回退。你甚至可以在 Bit.dev 的組件中心上共享它，這樣你的團(tuán)隊(duì)和你自己將來(lái)都能重用它。這樣，你就會(huì)擁有一個(gè)優(yōu)化極佳的圖像組件，可以毫不猶豫地用在所有 Web 項(xiàng)目中。

眾所周知，很長(zhǎng)一段時(shí)間以來(lái)，img 標(biāo)簽一直是 HTML 的核心元素之一，它的簡(jiǎn)單性和可用性是毋庸置疑的。

然而，隨著各種屏幕尺寸、分辨率的設(shè)備和復(fù)雜用戶需求的發(fā)展，img 標(biāo)簽的響應(yīng)性和在多設(shè)備應(yīng)用中使用的能力開(kāi)始受到質(zhì)疑。

所有這些問(wèn)題可以歸結(jié)為兩大方面：

1. 分辨率切換——為小屏幕設(shè)備提供較小尺寸圖像的問(wèn)題。

2. 圖像切換——在不同屏幕上顯示不同圖像的問(wèn)題。

現(xiàn)在，我們來(lái)看看如何解決這些問(wèn)題，以及 picture 標(biāo)簽的其他特性。

如前所述，當(dāng)今的網(wǎng)頁(yè)設(shè)計(jì)師經(jīng)常使用高分辨率圖像來(lái)增加用戶吸引力。但是作為開(kāi)發(fā)人員，我們必須非常小心地選擇正確的 HTML 元素。

假設(shè)你對(duì)高分辨率圖像使用簡(jiǎn)單的 Img 標(biāo)簽。在這種情況下，運(yùn)行你應(yīng)用程序的每臺(tái)設(shè)備都會(huì)使用相同的圖像，并且肯定會(huì)導(dǎo)致屏幕分辨率較低的設(shè)備（如移動(dòng)設(shè)備）出現(xiàn)性能問(wèn)題。

這可能會(huì)導(dǎo)致更長(zhǎng)的圖像加載時(shí)間以及從上到下一塊一塊地圖像加載。

<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 屬性接收多個(gè)圖像，其寬度都以像素為單位，瀏覽器使用這些值在提供的圖像之間進(jìn)行選擇。在上面的示例中，同一圖像有 3 個(gè)版本，具有 3 種不同的尺寸。

Sizes 屬性定義圖像將在屏幕上占據(jù)的空間。在上面的示例中，如果屏幕的最小寬度為 1280px，則圖像將占據(jù) 1200px。

話雖如此，建議不要僅將 picture 標(biāo)簽用于分辨率切換，因?yàn)榭梢允褂酶掳姹镜?Img 標(biāo)簽（具有更多的瀏覽器支持）來(lái)實(shí)現(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ù)情況下，我們需要同時(shí)處理“分辨率切換”和“圖像切換”，并且 picture 標(biāo)簽是最好的解決方案。

因此，讓我們看看如何使用 picture 標(biāo)簽解決圖像切換問(wèn)題。

圖像切換背后的主要思想是根據(jù)設(shè)備的屏幕尺寸顯示不同的圖像。在大多數(shù)情況下，切換到移動(dòng)設(shè)備時(shí)，在大屏幕上看起來(lái)很棒的圖像可能會(huì)被裁剪或顯得很小。

我們可以為不同的屏幕尺寸提供不同版本的圖像來(lái)解決這一問(wèn)題。這些不同的版本可以是同一圖像的橫向，縱向或任何自定義版本。

<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>

最后一個(gè) img 標(biāo)簽用于向后兼容不支持 picture 標(biāo)簽的瀏覽器。

隨著技術(shù)的飛速發(fā)展，新的圖像格式也在不斷涌現(xiàn)。其中一些格式（例如 webp、svg 和 avif）提供了更高的用戶體驗(yàn)水平。

另一方面，某些瀏覽器對(duì)這些現(xiàn)代圖像類(lèi)型存在限制，如果我們不使用兼容的圖像類(lèi)型，事情將會(huì)適得其反。

但是，我們可以使用 Picture 標(biāo)簽輕松解決這個(gè)問(wèn)題，因?yàn)樗试S我們?cè)谄渲邪鄠€(gè)來(lái)源。

<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 格式的三種圖像類(lèi)型。首先，瀏覽器將嘗試 avif 格式；如果失敗，則將嘗試 webp 格式。如果瀏覽器不支持這兩種方式，它將使用 png 圖像。

Chrome 宣布“DevTools 將在 Rendering 選項(xiàng)卡中提供兩個(gè)新的仿真，以模擬部分受支持的圖像類(lèi)型”后，picture 標(biāo)簽用起來(lái)就更有意思了。

從 Chrome 88 開(kāi)始，你可以使用 Chrome DevTools 檢查瀏覽器與圖像類(lèi)型的兼容性。

使用 ChromeDevTools 進(jìn)行圖像兼容性仿真

盡管我們討論了為什么 picture 標(biāo)簽比 img 標(biāo)簽更好用的原因，但我必須堅(jiān)持一點(diǎn)，那就是 img 標(biāo)簽并沒(méi)有消亡，或者說(shuō)不會(huì)很快消亡。

如果我們能明智地使用 img 提供的屬性，如 srcset 和 size，則可以從中獲得最大收益。例如，我們可以只使用 img 標(biāo)簽來(lái)解決“分辨率切換”問(wèn)題。

另一方面，我們可以使用 picture 標(biāo)簽的媒體查詢和其他屬性輕松實(shí)現(xiàn)分辨率切換和圖像切換。

用于部分受支持的圖像類(lèi)型和 Chrome DevTools 的支持可以被認(rèn)為是 picture 標(biāo)簽的額外優(yōu)勢(shì)。

但是，這兩種元素各有利弊。因此，我們必須根據(jù)我們的需求仔細(xì)考慮和使用最合適的元素。

謝謝你的閱讀！

熱門(mén)推薦：

• 警告！牢底坐穿的那種技術(shù)...學(xué)完別亂用！
  

• IDEA 中的神奇插件：防沉迷、防猝死 ...
• 程序員入職軟件外包公司的注意事項(xiàng)??！
  
  

最近面試BAT，整理一份Python資料《Python學(xué)習(xí)手冊(cè)》，覆蓋了Python知識(shí)點(diǎn)、人工智能、深度學(xué)習(xí)、機(jī)器學(xué)習(xí)等方面。
獲取方式：關(guān)注公眾號(hào)并回復(fù) Python 領(lǐng)取，更多內(nèi)容陸續(xù)奉上。
明天見(jiàn)(??ω??)??