為什你應(yīng)該使用picture標(biāo)簽而不是Img標(biāo)簽
點(diǎn)擊上方關(guān)注 TianTianUp，一起學(xué)習(xí)，天天進(jìn)步
大家好，我是小弋。
分享的內(nèi)容是為什你應(yīng)該使用picture標(biāo)簽而不是Img標(biāo)簽。
寫在前面
在用戶界面中使用圖片和動(dòng)畫已經(jīng)成為現(xiàn)代網(wǎng)絡(luò)應(yīng)用的一個(gè)普遍現(xiàn)象。盡管這些現(xiàn)代設(shè)計(jì)的重點(diǎn)是改善你的應(yīng)用程序的用戶體驗(yàn)，但如果這些圖像對所有設(shè)備都沒有響應(yīng)，事情就會(huì)變得適得其反。
作為開發(fā)者，我們必須滿足所有這些要求。但大多數(shù)時(shí)候，我們錯(cuò)過了一些小東西，而這些小東西可以帶來巨大的差異，因?yàn)槲覀冋趯ふ腋邔哟蔚慕鉀Q方案。
在picture標(biāo)簽和img標(biāo)簽之間做出選擇可能是這樣一個(gè)微小的決定，但如果你做出正確的選擇，你將能夠改善用戶體驗(yàn)和性能。
本文將討論picture和img標(biāo)簽的區(qū)別，以及是什么讓picture標(biāo)簽比img標(biāo)簽更突出。
下次你創(chuàng)建一個(gè)React picture組件時(shí)，一定要在其中實(shí)現(xiàn)你即將學(xué)到的最佳實(shí)踐。根據(jù)收到的prop返回正確的標(biāo)簽，并照顧到所有必要的回退。
img標(biāo)簽存在的問題
眾所周知，在相當(dāng)長的一段時(shí)間內(nèi)，Img標(biāo)簽一直是HTML的核心元素之一，它的簡單性和可用性一直沒有受到懷疑。
然而，隨著各種屏幕尺寸、分辨率的設(shè)備的發(fā)展，以及復(fù)雜的用戶需求，人們開始對它的響應(yīng)能力和在多設(shè)備應(yīng)用中的使用能力產(chǎn)生了疑問。
所有這些問題可以歸納為兩個(gè)主要問題。
分辨率切換--為窄屏幕設(shè)備提供較小尺寸圖像的問題。 藝術(shù)指導(dǎo) - 在不同的屏幕尺寸上顯示不同的圖像的問題。
現(xiàn)在，讓我們看看這些問題是如何被解決的以及picture標(biāo)簽的附加功能。
分辨率切換
使用srcset和 sizes屬性進(jìn)行分辨率切換。
正如我前面提到的，現(xiàn)代的網(wǎng)頁設(shè)計(jì)師經(jīng)常使用高分辨率的圖片來增加用戶的吸引力。但作為開發(fā)者，我們必須非常小心地選擇正確的HTML元素。
假設(shè)你用一個(gè)簡單的Img標(biāo)簽來處理高分辨率的圖片。在這種情況下，在你的應(yīng)用程序運(yùn)行的每個(gè)設(shè)備中都會(huì)使用相同的圖像，事實(shí)上，這將導(dǎo)致在屏幕分辨率較低的設(shè)備（如移動(dòng)設(shè)備）中出現(xiàn)性能問題。
這可能導(dǎo)致更長的圖像加載時(shí)間和從上到下的部分圖像加載。
這個(gè)問題可以通過使用srcset和 sizes屬性在picture標(biā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個(gè)不同尺寸的同一圖像的版本。
sizes屬性定義了圖像在屏幕上所占的空間。在上面的例子中，如果屏幕的最小寬度是1280px，圖像將占據(jù)1200px。
說到這里，我們建議不要僅僅為了分辨率切換而使用picture標(biāo)簽，因?yàn)橥瑯拥氖虑榭梢酝ㄟ^Img標(biāo)簽的更新版本來實(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í)處理分辨率切換和藝術(shù)指導(dǎo)，而picture標(biāo)簽是最好的解決方案。
因此，讓我們看看如何使用picture標(biāo)簽來解決這些問題的。
使用media屬性
主要想法是根據(jù)設(shè)備的屏幕尺寸來顯示不同的圖像。在大多數(shù)情況下，一張?jiān)诖笃聊簧峡雌饋矸浅Ｆ恋膱D片，當(dāng)你切換到移動(dòng)端時(shí)，可能會(huì)被裁剪或看起來非常小。
我們可以通過為不同的屏幕尺寸提供不同版本的圖像來解決這個(gè)問題。這些不同的版本可以是橫向的，縱向的，或者是同一張圖片的任何定制版本。
有了picture標(biāo)簽，我們可以通過在picture標(biāo)簽內(nèi)使用多個(gè)源標(biāo)簽來輕松實(shí)現(xiàn)分辨率切換。
<picture>
<source ....>
<source ....>
<source ....>
</picture>
然后我們可以使用media屬性來定義不同的媒體條件，這些來源將被使用。我們還可以像上一節(jié)討論的那樣，以類似的方式使用srcset和 sizes屬性。
下面的例子顯示了一個(gè)使用picture標(biāo)簽和分辨率切換的完整例子。
<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>
如果屏幕方向是橫向，瀏覽器將顯示第一組圖片，如果方向是縱向，瀏覽器將使用第二組圖片。除此之外，你還可以使用帶有最大寬度和最小寬度參數(shù)的媒體屬性。
<picture>
<source media="(max-width: 767px)" ....>
<source media="(min-width: 768px)" ....>
</picture>
最后一個(gè)img標(biāo)簽是為了向后兼容那些不支持圖片標(biāo)簽的瀏覽器。
使用部分支持的圖像類型
隨著技術(shù)的快速發(fā)展，不同類型的現(xiàn)代圖像類型被逐日引入。其中一些類型，如webp、svg和avif，提供了更高的用戶體驗(yàn)水平。
另一方面，一些瀏覽器對這些現(xiàn)代圖像類型有限制，如果我們不使用兼容的圖像類型，事情就會(huì)適得其反。
但是，我們可以通過使用picture標(biāo)簽輕松地解決這個(gè)問題，因?yàn)樗试S我們在其中包含多個(gè)來源。
<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圖像。
當(dāng)Chrome宣布 "DevTools將在渲染標(biāo)簽中提供兩種新的模擬，以模擬部分支持的圖像類型 "時(shí)，關(guān)于圖片標(biāo)簽的事情變得更加有趣。
從Chrome 88開始，你可以使用Chrome DevTools來檢查瀏覽器對圖片類型的兼容性。
小結(jié)
盡管我們談到了為什么圖片標(biāo)簽比img標(biāo)簽更突出，但我必須堅(jiān)持認(rèn)為，img標(biāo)簽并沒有死，也不會(huì)很快死。
如果我們明智地使用所提供的屬性，如srcset和size，我們可以從img標(biāo)簽中獲得最大的收益。例如，我們可以只使用img標(biāo)簽來解決分辨率切換問題。
另一方面，我們可以使用媒體查詢和其他提供的屬性，使用圖片標(biāo)簽來輕松實(shí)現(xiàn)分辨率切換和藝術(shù)指導(dǎo)。
對部分支持的圖片類型的處理能力和Chrome開發(fā)工具的支持可以被認(rèn)為是圖片標(biāo)簽的額外加分項(xiàng)。
然而，這兩個(gè)元素都有其優(yōu)點(diǎn)和缺點(diǎn)。因此，我們必須仔細(xì)考慮并根據(jù)我們的要求使用最合適的元素。
謝謝您的閱讀?。?！
最后
面試交流群持續(xù)開放，分享了近 許多 個(gè)面經(jīng)。
加我微信: DayDay2021，備注面試，拉你進(jìn)群。
我是 小弋，我們下篇見~
