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> ，它将被选择。