Wird der Server mehr als ein Bild an das <picture>-Tag senden und zurückgreifen?
P粉674876385
P粉674876385 2024-04-03 09:05:59
0
1
454

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.

P粉674876385
P粉674876385

Antworte allen(1)
P粉556159786

它采用“惰性”方法。在 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.

Flowers
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage