[[408304]]

本文轉(zhuǎn)載自微信公眾號「TianTianUp」，作者小弋。轉(zhuǎn)載本文請聯(lián)系TianTianUp公眾號。

大家好，我是小弋。

分享的內(nèi)容是為什你應(yīng)該使用picture標(biāo)簽而不是Img標(biāo)簽。

寫在前面

[[408305]]

在用戶界面中使用圖片和動畫已經(jīng)成為現(xiàn)代網(wǎng)絡(luò)應(yīng)用的一個普遍現(xiàn)象。盡管這些現(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)簽更突出。

下次你創(chuàng)建一個React picture組件時，一定要在其中實現(xiàn)你即將學(xué)到的最佳實踐。根據(jù)收到的prop返回正確的標(biāo)簽，并照顧到所有必要的回退。

img標(biāo)簽存在的問題

眾所周知，在相當(dāng)長的一段時間內(nèi)，Img標(biāo)簽一直是HTML的核心元素之一，它的簡單性和可用性一直沒有受到懷疑。

然而，隨著各種屏幕尺寸、分辨率的設(shè)備的發(fā)展，以及復(fù)雜的用戶需求，人們開始對它的響應(yīng)能力和在多設(shè)備應(yīng)用中的使用能力產(chǎn)生了疑問。

所有這些問題可以歸納為兩個主要問題。

分辨率切換--為窄屏幕設(shè)備提供較小尺寸圖像的問題。

藝術(shù)指導(dǎo) - 在不同的屏幕尺寸上顯示不同的圖像的問題。

現(xiàn)在，讓我們看看這些問題是如何被解決的以及picture標(biāo)簽的附加功能。

分辨率切換

正如我前面提到的，現(xiàn)代的網(wǎng)頁設(shè)計師經(jīng)常使用高分辨率的圖片來增加用戶的吸引力。但作為開發(fā)者，我們必須非常小心地選擇正確的HTML元素。 

來增加用戶的吸引力。但作為開發(fā)者，我們必須非常小心地選擇正確的HTML元素。

假設(shè)你用一個簡單的Img標(biāo)簽來處理高分辨率的圖片。在這種情況下，在你的應(yīng)用程序運行的每個設(shè)備中都會使用相同的圖像，事實上，這將導(dǎo)致在屏幕分辨率較低的設(shè)備(如移動設(shè)備)中出現(xiàn)性能問題。

這可能導(dǎo)致更長的圖像加載時間和從上到下的部分圖像加載。

[[408306]]

Top to bottom image loading issue

這個問題可以通過使用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個不同尺寸的同一圖像的版本。

sizes屬性定義了圖像在屏幕上所占的空間。在上面的例子中，如果屏幕的最小寬度是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ù)情況下，我們需要同時處理分辨率切換和藝術(shù)指導(dǎo)，而picture標(biāo)簽是最好的解決方案。

因此，讓我們看看如何使用picture標(biāo)簽來解決這些問題的。

使用media屬性

主要想法是根據(jù)設(shè)備的屏幕尺寸來顯示不同的圖像。在大多數(shù)情況下，一張在大屏幕上看起來非常漂亮的圖片，當(dāng)你切換到移動端時，可能會被裁剪或看起來非常小。

我們可以通過為不同的屏幕尺寸提供不同版本的圖像來解決這個問題。這些不同的版本可以是橫向的，縱向的，或者是同一張圖片的任何定制版本。

有了picture標(biāo)簽，我們可以通過在picture標(biāo)簽內(nèi)使用多個源標(biāo)簽來輕松實現(xiàn)分辨率切換。

<picture> 
    
   <source ....> 
   <source ....> 
   <source ....> 
</picture> 

然后我們可以使用media屬性來定義不同的媒體條件，這些來源將被使用。我們還可以像上一節(jié)討論的那樣，以類似的方式使用srcset和 sizes屬性。

下面的例子顯示了一個使用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> 

最后一個img標(biāo)簽是為了向后兼容那些不支持圖片標(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圖像。

當(dāng)Chrome宣布 "DevTools將在渲染標(biāo)簽中提供兩種新的模擬，以模擬部分支持的圖像類型 "時，關(guān)于圖片標(biāo)簽的事情變得更加有趣。

從Chrome 88開始，你可以使用Chrome DevTools來檢查瀏覽器對圖片類型的兼容性。

Using Chrome DevTools for Image Compatibility Emulations

小結(jié)

盡管我們談到了為什么圖片標(biāo)簽比img標(biāo)簽更突出，但我必須堅持認(rèn)為，img標(biāo)簽并沒有死，也不會很快死。

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

另一方面，我們可以使用媒體查詢和其他提供的屬性，使用圖片標(biāo)簽來輕松實現(xiàn)分辨率切換和藝術(shù)指導(dǎo)。

對部分支持的圖片類型的處理能力和Chrome開發(fā)工具的支持可以被認(rèn)為是圖片標(biāo)簽的額外加分項。

然而，這兩個元素都有其優(yōu)點和缺點。因此，我們必須仔細(xì)考慮并根據(jù)我們的要求使用最合適的元素。