サーバーは複数の画像を <picture> タグに送信してフォールバックしますか?

Question

このように実装されたイメージタグに興味があります。

リーリー

クライアントの場合、ブラウザが webp を処理できる場合は、サーバーから送信された webp 画像が表示され、そうでない場合は、同様にサーバーから送信された jpg 画像が表示されることを理解しています。

私の目標はサーバーの帯域幅の最適化であるため、サーバーは両方の画像をクライアントに送信する必要があるのか​​、それともクライアントが処理できる 1 つの画像のみを送信するのかを知りたいです。

Answer 1

これには「怠惰な」アプローチが必要です。 source 要素が「利用可能」になるまで、source 要素で指定されたファイルは要求されません。

「利用可能」とは、次のいずれかを意味します:

• ブラウザはこのファイル形式をサポートしています
• メディア クエリが完了しました

デモを例として挙げます https://www.w3schools.com/tags/tag_picture.asp" rel="nofollow noreferrer">W3Schools：
(以下はプレゼンテーションのコピー)

リーリー