html 中 img 標簽的 webp 后備

Question

我知道解決方案是<picture>

但哪種格式是標准的？

1.

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

2.

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

3.

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

Answer 1

1號將是這樣做的標准方式。

當使用<picture>元素時，瀏覽器會查看每個<source>元素 - 從頂部開始 - 以找到最適合當前場景的圖像。 在您的情況下，只有它支持type屬性中的格式。 但如果您在srcset列表中添加 2x 或 3x 版本，它也可以在media屬性中查找媒體查詢或用戶屏幕的像素密度等內容。

如MDN所述，如果瀏覽器在<source>中找不到合適的匹配項，則默認為<img>標記：

<img>元素有兩個用途：

它描述了圖像的大小和其他屬性及其呈現方式。 如果所提供的<source>元素都不能提供可用的圖像，它會提供一個備用方案。

因此，您示例中的 JPEG 也不需要具有<source> ，因為如果不使用任何<source> ，它將被選擇。