伺服器是否會向 <picture> 標記發送超過 1 個映像並進行回退？

Question

我對像這樣實現的圖片標籤很好奇。

<picture>
  <source srcset="path/img.webp" type="image/webp" />
  <img src="path/img.jpg" alt="image" />
</picture>

對於客戶端，我理解如果瀏覽器可以處理webp，它將顯示從伺服器發送的webp圖像；否則，它將顯示同樣從伺服器發送的 jpg 圖像。

我想知道伺服器是否需要將兩張圖像都發送給客戶端，或者伺服器只發送一張客戶端可以處理的圖像，因為我的目標是伺服器頻寬優化。

Answer 1

它採用「惰性」方法。在 source 元素「可用」之前，它不會要求 source 元素中指定的檔案。

「可用」可能表示以下任何一項：

• 瀏覽器支援該文件類型
• 已滿足媒體查詢

以 示範 為例https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools：
（下面是演示的副本）

  



  
The picture element
  
Resize the browser window to load different images.