如何使用WebP图片并支持Safari浏览器

Question

如何使用WebP图片并支持Safari浏览器

5

由于更好的压缩，我尝试在整个网站上使用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 解决方案？

- Matthew

3个回答

3

最终答案如下：

@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包围的查询。这样浏览器只会加载一个background-image：最适合的那个。

- Santiago Torrabadella

这很棒 - 我该如何在IE 11上显示jpg？ - anjanesh

根据 https://caniuse.com/?search=supports，你不能在IE中使用`@supports`功能。如果你真的想检测Web浏览器以查看是否应该下载.webp图像，你可以使用JavaScript，但我不会这样做，因为在CSS中执行它的酷部分是它所需的加载时间很短（当然与JS相比）。 - Santiago Torrabadella

2

顺便提一下，根据 https://bugzilla.mozilla.org/show_bug.cgi?id=1713460 - @supports 检查的是 background-image 是否被支持，而不一定是你可以检查 avif 或 webp 是否被支持。 - anjanesh

谢谢，好的解决方案。 - Alex

0

我不知道是否有变化，但在2022年，我正在使用以下内容：

backround: url('image.jpg');
backround: url('image.webp');

而浏览器只下载webp格式的图片。

- Karl Zillner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucas David Ferrero · Accepted Answer

这里有一个有趣的问题。据我所知，您可以使用级联或@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/