如何在Firefox或IE/Edge中以Chrome和.jpg显示.webp？

Question

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

我现在用户这个CSS代码:

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

有没有这样的-moz-background-image东西？

Answer 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>

Answer 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