Wird der Server mehr als ein Bild an das <picture>-Tag senden und zurückgreifen?

Question

Ich bin neugierig auf so implementierte Bild-Tags.

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

Für den Client verstehe ich, dass der Browser das vom Server gesendete WebP-Bild anzeigt, andernfalls das ebenfalls vom Server gesendete JPG-Bild.

Ich möchte wissen, ob der Server beide Bilder an den Client senden muss oder ob der Server nur ein Bild sendet, das der Client verarbeiten kann, da mein Ziel die Optimierung der Serverbandbreite ist.

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.