Will the server send more than 1 image to the <picture> tag and fall back?

Question

I'm curious about image tags implemented like this.

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

For the client, I understand that if the browser can handle webp, it will display the webp image sent from the server; otherwise, it will display the jpg image also sent from the server.

I want to know if the server needs to send both images to the client or if the server only sends one image that the client can handle since my goal is server bandwidth optimization.

Answer 1

It takes a "lazy" approach. It will not request the file specified in the source element until the source element is "available".

"Available" may mean any of the following:

• Browser supports this file type
• Media Query Fulfilled

Take Demo as an example https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools：
(Copy of presentation below)

  



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