由于更好的压缩，我正在尝试在整个网站中使用 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 图像的最佳解决方案是什么？
我没有使用jquery mobile。
我在WordPress中构建了一个模板，并为每个页面设置了全角背景：Background_1.jpg =主页，Background_1.jpg =关于，ens ....
这是前端加载的内容：
<div id="bg">
<img id="background" src="images/Background_1.jpg" alt="background">
</div>
所以我的问题是以下几点：
当我进入流体网格布局时，我想完全删除此元素以加快加载时间。
我也不想隐藏它，我想在窗口大小小于600px时删除html。
有人做过吗？