如何使用Webp图像和支持野生动物园

Question

由于压缩效果更好，我试图在整个网站上使用webp图像。但是，我知道Safari浏览器不支持webp。使用background-image: url("img/img.webp)加载图像。然后，我应用其他background属性。

我了解<picture>标签可用于显示不同的图像，具体取决于浏览器的支持。像这样。

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

但是，如果有一种方法可以使用css进行操作，这样省去了我为所有图像编写新的html和样式的麻烦，那将更加方便。

例如类似这样的东西

#image-id {
    background-image: url("../img/img.webp", "../img/img.jpeg"); // show jpeg if webp not supported 
}

或者如果不可能的话，也许是这样的

@media only screen and (safari-specific-property:) {
    background-image: url("../img/img.jpeg"); // show jpeg for safari
}

在维护浏览器支持的同时使用Webp图像的最佳解决方案是什么，理想情况下使用CSS？

Answer 1

有趣的问题。据我所知，您可以使用级联或@supports。

让我们看看使用层叠时会发生什么：

.bg {
 /*fallback */
 background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
 background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}

它可以正常工作，但是了解JPG和WebP（占大多数）的浏览器会提出两个请求，而这并不是最佳选择。

现在，让我们看一下@supports at rule。

@supports not (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
    .bg {
        background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
    }
}
.bg {
    background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}

由于大多数浏览器都支持WebP，所以我认为此解决方案是理想的。

不支持WebP的浏览器将按照规则获取JPG。然后，他们将阅读下一个称为WebP的样式，由于他们不支持该功能，因此他们将坚持使用JPG。我想知道您是否可以在野生动物园浏览器中尝试此操作。

感兴趣的链接：

https://css-tricks.com/how-supports-works/

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/