HTML <picture>元素允許開發(fā)人員為響應(yīng)設(shè)計定義多個圖像源。 1）它使用<source>標(biāo)簽帶有媒體查詢或格式類型的標(biāo)簽，根據(jù)設(shè)備特性提供優(yōu)化的圖像。 2）瀏覽器選擇第一個匹配的源，如果無應(yīng)用，則掉回標(biāo)簽。 3）這可以使用例諸如使用現(xiàn)代格式（WebP，AVIF），提供不同的分辨率或每個屏幕尺寸的農(nóng)作物調(diào)整作物。 4）有效使用需要正確訂購源，智能SRCSET和大小屬性，后備測試和圖像優(yōu)化。

如果您要構(gòu)建一個現(xiàn)代響應(yīng)迅速的網(wǎng)站，則HTML <picture></picture>元素是在處理各種設(shè)備上的圖像時使生活更輕松的工具之一。它為您提供了更多的控制權(quán)，而不僅僅是使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251950413989.jpeg" class="lazy" alt="什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？" > ，它讓您為圖像定義多個源，因此瀏覽器可以根據(jù)屏幕尺寸，分辨率甚至支持的格式選擇正確的源。

什么是<picture></picture>元素？

<picture></picture>元素像一個用于多個<source></source>標(biāo)簽的容器一樣工作，一個必需的<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251950572211.jpeg" class="lazy" alt="什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？" >標(biāo)簽。將其視為總機 - 它告訴瀏覽器，根據(jù)您設(shè)置的條件，要加載的圖像。對于提供優(yōu)化的圖像而無需讓用戶下載不必要的大文件，這非常方便。

以下是基本形式的外觀：

 <圖片>
  <source srcset =“大.jpg”媒體=“（最小寬度：1024px）”>
  <source srcset =“ edimen.jpg”媒體=“（最小寬度：768px）”>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175251950687998.jpeg"  class="lazy"  src =“ small.jpg” alt =“響應(yīng)式圖像”>
</picture>

每個<source>都有一個指向圖像和media條件的srcset 。瀏覽器將它們從上到下檢查，并使用第一個匹配源。如果沒有匹配，它將回到<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251950687998.jpeg" class="lazy" alt="什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？" >標(biāo)簽的src 。

為什么要使用<picture>而不是<img alt="什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？" > ？

因為并非所有屏幕都是相同的。您不希望移動用戶下載3MB桌面大小的橫幅，對嗎？此外，尚未得到每個瀏覽器的較新圖像格式，例如每個瀏覽器，但它們提供了更好的壓縮和質(zhì)量。使用<picture> ，您可以：

• 將WebP提供給現(xiàn)代瀏覽器，然后返回JPEG供較老的瀏覽器。
• 在高DPI屏幕上加載高分辨率圖像。
• 根據(jù)布局提供不同的圖像的農(nóng)作物（例如在小屏幕上顯示肖像作物）。

例如：

 <圖片>
  <source srcset =“ photo.avif” type =“ image/avif”>
  <source srcset =“ photo.webp” type =“ image/webp”>
  <img src =“ photo.jpg” alt =“現(xiàn)代圖像格式支持”>
</picture>

這樣，瀏覽支持AVIF的瀏覽器可以獲得最小的文件，而其他文件則可以優(yōu)雅地歸還給WebP或JPEG。

如何有效使用<picture>

為了充分利用<picture> ，這里有一些實用技巧：

• 訂單問題：將您的首選或最高質(zhì)量來源放在首位。瀏覽器一旦找到比賽就停止檢查。
• 巧妙地使用srcset ：如果您要處理流體布局，則與sizes屬性配對。例如：

   <源
          尺寸=“（最小寬度：1024px）90VW，100VW”
          媒體=“（最小寬度：768px）”>

  這有助于瀏覽器根據(jù)視口尺寸選擇最佳的圖像寬度。

• 測試后備：確保您的<img alt="什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？" >標(biāo)簽指向圖像的安全，廣泛兼容的版本。
• 優(yōu)化資產(chǎn)：即使響應(yīng)迅速的切換，大型不優(yōu)化圖像仍然損害了性能。使用ImageMagick，Squoosh或構(gòu)建插件之類的工具來提前壓縮和轉(zhuǎn)換圖像。

最后的想法

使用<picture></picture>元素并不復(fù)雜，但確實需要提前思考您的受眾使用的設(shè)備和瀏覽哪種設(shè)備和瀏覽。當(dāng)您關(guān)心性能和視覺質(zhì)量時，它特別有用。

您不必到處使用它 - 有時srcset的簡單<img alt="什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？" >就足夠了。但是，當(dāng)您需要精確控制圖像交付時， <picture></picture>絕對是工作的正確工具。

就是這樣。不是魔術(shù)，只是聰明的html。

以上是什么是HTML圖片元素，如何將其用于響應(yīng)式圖像？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！