為什么你應該使用picture標簽而不是Img標簽
本文轉載自微信公眾號「TianTianUp」，作者小弋。轉載本文請聯系TianTianUp公眾號。
大家好，我是小弋。
分享的內容是為什你應該使用picture標簽而不是Img標簽。
寫在前面
在用戶界面中使用圖片和動畫已經成為現代網絡應用的一個普遍現象。盡管這些現代設計的重點是改善你的應用程序的用戶體驗，但如果這些圖像對所有設備都沒有響應，事情就會變得適得其反。
作為開發者，我們必須滿足所有這些要求。但大多數時候，我們錯過了一些小東西，而這些小東西可以帶來巨大的差異，因為我們正在尋找更高層次的解決方案。
在picture標簽和img標簽之間做出選擇可能是這樣一個微小的決定，但如果你做出正確的選擇，你將能夠改善用戶體驗和性能。
本文將討論picture和img標簽的區別，以及是什么讓picture標簽比img標簽更突出。
下次你創建一個React picture組件時，一定要在其中實現你即將學到的最佳實踐。根據收到的prop返回正確的標簽，并照顧到所有必要的回退。
img標簽存在的問題
眾所周知，在相當長的一段時間內，Img標簽一直是HTML的核心元素之一，它的簡單性和可用性一直沒有受到懷疑。
然而，隨著各種屏幕尺寸、分辨率的設備的發展，以及復雜的用戶需求，人們開始對它的響應能力和在多設備應用中的使用能力產生了疑問。
所有這些問題可以歸納為兩個主要問題。
分辨率切換--為窄屏幕設備提供較小尺寸圖像的問題。
藝術指導 - 在不同的屏幕尺寸上顯示不同的圖像的問題。
現在，讓我們看看這些問題是如何被解決的以及picture標簽的附加功能。
分辨率切換
正如我前面提到的，現代的網頁設計師經常使用高分辨率的圖片來增加用戶的吸引力。但作為開發者，我們必須非常小心地選擇正確的HTML元素。
來增加用戶的吸引力。但作為開發者，我們必須非常小心地選擇正確的HTML元素。
假設你用一個簡單的Img標簽來處理高分辨率的圖片。在這種情況下，在你的應用程序運行的每個設備中都會使用相同的圖像，事實上，這將導致在屏幕分辨率較低的設備(如移動設備)中出現性能問題。
這可能導致更長的圖像加載時間和從上到下的部分圖像加載。
Top to bottom image loading issue
這個問題可以通過使用srcset和 sizes屬性在picture標簽上輕松解決。
- <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屬性接受多張圖片，其各自的寬度為像素，瀏覽器使用這些值在所提供的圖片中進行選擇。
在上面的例子中，有3個不同尺寸的同一圖像的版本。
sizes屬性定義了圖像在屏幕上所占的空間。在上面的例子中，如果屏幕的最小寬度是1280px，圖像將占據1200px。
說到這里，我們建議不要僅僅為了分辨率切換而使用picture標簽，因為同樣的事情可以通過Img標簽的更新版本來實現(它有更多的瀏覽器支持)。
- <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">
但是，在大多數情況下，我們需要同時處理分辨率切換和藝術指導，而picture標簽是最好的解決方案。
因此，讓我們看看如何使用picture標簽來解決這些問題的。
使用media屬性
主要想法是根據設備的屏幕尺寸來顯示不同的圖像。在大多數情況下，一張在大屏幕上看起來非常漂亮的圖片，當你切換到移動端時，可能會被裁剪或看起來非常小。
我們可以通過為不同的屏幕尺寸提供不同版本的圖像來解決這個問題。這些不同的版本可以是橫向的，縱向的，或者是同一張圖片的任何定制版本。
有了picture標簽，我們可以通過在picture標簽內使用多個源標簽來輕松實現分辨率切換。
- <picture>
- <source ....>
- <source ....>
- <source ....>
- </picture>
然后我們可以使用media屬性來定義不同的媒體條件，這些來源將被使用。我們還可以像上一節討論的那樣，以類似的方式使用srcset和 sizes屬性。
下面的例子顯示了一個使用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標簽是為了向后兼容那些不支持圖片標簽的瀏覽器。
使用部分支持的圖像類型
隨著技術的快速發展，不同類型的現代圖像類型被逐日引入。其中一些類型，如webp、svg和avif，提供了更高的用戶體驗水平。
另一方面，一些瀏覽器對這些現代圖像類型有限制，如果我們不使用兼容的圖像類型，事情就會適得其反。
但是，我們可以通過使用picture標簽輕松地解決這個問題，因為它允許我們在其中包含多個來源。
- <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將在渲染標簽中提供兩種新的模擬，以模擬部分支持的圖像類型 "時，關于圖片標簽的事情變得更加有趣。
從Chrome 88開始，你可以使用Chrome DevTools來檢查瀏覽器對圖片類型的兼容性。
Using Chrome DevTools for Image Compatibility Emulations
小結
盡管我們談到了為什么圖片標簽比img標簽更突出，但我必須堅持認為，img標簽并沒有死，也不會很快死。
如果我們明智地使用所提供的屬性，如srcset和size，我們可以從img標簽中獲得最大的收益。例如，我們可以只使用img標簽來解決分辨率切換問題。
另一方面，我們可以使用媒體查詢和其他提供的屬性，使用圖片標簽來輕松實現分辨率切換和藝術指導。
對部分支持的圖片類型的處理能力和Chrome開發工具的支持可以被認為是圖片標簽的額外加分項。
然而，這兩個元素都有其優點和缺點。因此，我們必須仔細考慮并根據我們的要求使用最合適的元素。
