您需要回退到受支持的图像格式.

You need to fallback to a supported image format.

以下示例使用 <picture> 元素和 <source> 元素，并带有img元素回退.浏览器将尝试从上到下在<picture>元素内部加载资产，直到满足所有条件"(以下代码中未包含可选的sizes属性和复杂的srcset)，并且内容格式为支持.

Below's example is using the <picture> element and the <source> elements with an img element fallback. The browser will try loading the assets inside the <picture> element from top to bottom until all the "conditions were satisfied" (optional sizes attribute and complex srcset which aren't in the below code) and the content format is supported.

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

如果图像在CSS中使用:

您可以使用 Modernizr的 .no-webp类名来定位不支持的浏览器并改为使用非webp格式:

If the images are used in CSS:

You can use Modernizr's .no-webp class name to target non-support browsers and serve a non-webp format instead:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}