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 种方法是标准的做法。

\n

使用该<picture>元素时，浏览器会<source>从顶部 \xe2\x80\x93 开始查找每个元素 \xe2\x80\x93，以找到最适合当前场景的图像。在您的情况下，只有当它支持属性中的格式时才会如此type。但如果您在列表中添加 2x 或 3x 版本，它还可以查找media属性中的媒体查询或用户屏幕的像素密度等内容srcset。

\n

正如MDN上所述，如果浏览器在 s 中找不到合适的匹配项<source>，则默认使用以下<img>标签：

\n

\n

该<img>元素有两个用途：

\n

它描述图像及其表示的大小和其他属性。\n 如果所提供的<source>元素都无法提供可用的图像，它会提供后备方案。

\n

\n

因此，示例中的 JPEG 也不需要有 a ，因为如果没有使用任何 s，<source>则会选择它。<source>

\n