如何使用 webp 图片并支持 safari

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
}

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

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 规则。

@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。我想知道您是否可以在 safari 浏览器中尝试此操作。

感兴趣的链接：

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

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

Answer 2

最终的答案是这样的：

@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")
        }
    }
    @supports (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
        .bg {
            background-image: url("https://www.gstatic.com/webp/gallery/1.webp")
        }
    }

因为如果您只输入一个 @support 查询，浏览器将下载另一个未用 @support 包围的查询。这样，浏览器将只加载一张背景图像：更适合的一张。