如何在 Chrome 中显示 .webp 并在 Firefox 或 IE/Edge 中显示 .jpg？答案

【问题标题】：How to show .webp in Chrome and .jpg in Firefox or IE/Edge?如何在 Chrome 中显示 .webp 并在 Firefox 或 IE/Edge 中显示 .jpg？
【发布时间】：2017-08-07 09:07:17
【问题描述】：

是否有任何工作示例可以在 Chrome 中显示 .webp 格式文件，在 Firefox 和 IE / Edge 中显示不同的 .jpg 格式文件？

我现在使用这个CSS 代码：

#bgbox {
    background-imgage: url('../img/bg.webp');
}

有-moz-background-image 之类的吗？

【问题讨论】：

w3schools.com/tags/tag_picture.asp

标签： css google-chrome firefox microsoft-edge

【解决方案1】：

最简单的方法是使用<picture> 元素并设置webp 源和jpg 后备。您可以有多个来源，浏览器将尝试加载第一个兼容的来源，或者如果没有工作，则使用后备。

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

如果您需要设置背景，则需要使用不同的方法。您可以使用Modernizr 来检测浏览器是否支持webp，并据此应用不同的样式。

.image {
  background-size: cover;
  width: 100px;
  height: 100px;
}

.no-webp .image {
  background-image: url('https://www.gstatic.com/webp/gallery/4.jpg');
}

.webp .image {
  background-image: url('http://www.gstatic.com/webp/gallery/4.webp');
}

<script src="https://cdn.jsdelivr.net/modernizr/3.3.1/modernizr.min.js"></script>
<div class="image"></div>

【讨论】：

【解决方案2】：

您也可以使用图像集，例如：

#bgbox {
   background-image: url('https://www.gstatic.com/webp/gallery/4.jpg');
   background-image: -webkit-image-set(url('http://www.gstatic.com/webp/gallery/4.webp')1x );
}

因此不支持image-set 或webp 的浏览器将使用默认背景图像。所以你不需要像modernizr这样的javascript

【讨论】：

这是一个简洁干净的解决方案，但你确定这不会让浏览器同时下载吗？所以 Chrome 会下载 2 张图片？
没有，我已经测试过了。
谢谢，这就像一个魅力。但我认为由于 Safari 对此的支持可能存在一些问题（请参阅 caniuse.com/#feat=css-image-set 和 caniuse.com/#feat=webp）