如何在Chrome中显示.webp，在Firefox或IE / Edge中显示.jpg?

Question

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

我现在使用这个CSS代码：

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

有没有-moz-background-image或类似的东西？

Answer 1

最简单的方法是使用<picture>元素并设置具有jpg回退的webp源。您可以有多个源，浏览器将尝试加载第一个兼容的来源，或者在不起作用时使用回退。

<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这样的JavaScript