Le serveur enverra-t-il plus d'une image à la balise <picture> et reviendra-t-il ?

Question

Je suis curieux de connaître les balises d'image implémentées comme celle-ci.

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

Pour le client, je comprends que si le navigateur peut gérer webp, il affichera l'image webp envoyée depuis le serveur ; sinon, il affichera l'image jpg également envoyée depuis le serveur ;

Je veux savoir si le serveur doit envoyer les deux images au client ou si le serveur n'envoie qu'une seule image que le client peut gérer puisque mon objectif est l'optimisation de la bande passante du serveur.

Answer 1

Il faut une approche « paresseuse ». Le fichier spécifié dans l'élément source 元素“可用”之前，它不会请求 source.

« Disponible » peut signifier l'un des éléments suivants :

• Le navigateur prend en charge ce type de fichier
• Demandes des médias satisfaites

Prenons l'exemple de la démo https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools :
(Copie de la démo ci-dessous)

  



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