跨浏览器Webp图像支持 | 跨浏览器Webp图像支持

本文介绍了跨浏览器Webp图像支持的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有问题.在我的HTML页面中，有很多 Webp 图片，这些图片只能使用 Google Chrome 才能看到.使用 Mozilla ， Explore 或 Safari 等其他浏览器时，我看不到它们.

I have a problem. In my HTML pages I have a lot of Webp images that I can visualize only using Google Chrome. With other browsers like Mozilla, Explore or Safari I can't see them.

有解决方案吗?也许无需更改每个图像的扩展名(因为它们很多)?

Is there a solution? Maybe without change every image's extension (cause they are a lot)?

谢谢

推荐答案

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

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");
}

这篇关于跨浏览器Webp图像支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！