小编Mat*_*hew的帖子

由于更好的压缩，我正在尝试在整个网站中使用 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
}

在保持浏览器支持（理想情况下使用 css）的同时使用 webp 图像的最佳解决方案是什么？