如何在 Safari 浏览器中添加 webp 支持

Question

如何在 Safari 浏览器中添加 webp 支持

在我的网站中，我添加了 webp 格式的所有图像。所有这些图像在 Chrome 和 Firefox 浏览器中都能正常显示，但在 Safari 中却不能正常显示。

Answer 1

webp截至今天，Safari 不支持该格式，我不确定是否计划在不久的将来实施。但是您可以让浏览器选择是否使用webp或jpg喜欢。

<picture>
  <source srcset="
    /uploads/img_small.webp 1x,
    /uploads/img_big.webp 2x" type="image/webp">
  <source srcset="
    /uploads/img_small.jpg 1x, 
    /uploads/img_big.jpg 2x" type="image/jpeg">
  <img src="/uploads/img_small.jpg">
</picture>

Run Code Online (Sandbox Code Playgroud)

浏览器足够聪明，可以只下载和使用支持最好的图像。

这是一个很好的答案，因为它有第二个源标签用于后备，如果只有一个，某些 safari 版本就会出现问题。 (3认同)
这是替代“img”html 标签的绝佳解决方案，但如果该图像要作为 CSS 中的“背景图像”，该怎么办？另外，我不太喜欢必须复制每张图像的想法。希望有另一种方式。 (3认同)
这意味着像素密度，如果显示器支持更密集的像素，浏览器将使用更大的图像。您可以添加宽度属性，但不能同时添加两者，我只是更喜欢浏览器为用户设备选择正确的属性。 (3认同)

Answer 2

小智 43

WebP 官方支持已添加到 macOS Big Sur 以及 iOS、iPadOS 和公司的 Safari 14 中。

来源：https : //www.macrumors.com/2020/06/22/webp-safari-14

根据发行说明，此功能现已添加到 safari 14 的稳定版本中 https://developer.apple.com/documentation/safari-release-notes/safari-14-release-notes 我无法访问 Safari但如果有人这样做，我真的很想确认这一点。您可以在这里测试它 https://developers.google.com/speed/webp/gallery1 (3认同)
请注意，Big Sur 和 iOS14 仍处于测试阶段，因此普通大众要到今年秋天晚些时候才能看到这一点。 (2认同)

Answer 3

Ver*_*att 9

更新：

Firefox 终于加入了图像集的潮流。似乎它也不需要前缀。
此外，Safari 终于支持 WEBP，因此这个“解决方案”不再有用（除非您想将其用于 AVIF 或其他未来格式）。

我没有评论的声誉，但除了<picture>选项之外，我还想介绍一个（可能是喜怒无常的）CSS 背景解决方案。

截至目前，Safari（两个版本）是唯一不支持WEBP 的主要浏览器，但它似乎也是唯一支持image-set不带前缀的浏览器。

所以，如果我们使用三个代码块（我通常在背景图像场景中这样做）来允许所有浏览器完全回退，那么它看起来像：

background-image: url("exampleimage.webp"); /* Firefox - UPDATE: no longer needed in FF 88+! */
background-image: -webkit-image-set(
            url("exampleimage.webp") 1x,
            url("exampleimage@1-5x.webp") 1.5x,
            url("exampleimage@2x.webp") 2x
        );
background-image: image-set(
            url("exampleimage.jpg") 1x,
            url("exampleimage@1-5x.jpg") 1.5x,
            url("exampleimage@2x.jpg") 2x
        ) /* Safari */

Run Code Online (Sandbox Code Playgroud)

Answer 4

小智 5

当浏览器支持或不支持时，您可以按照此处的建议来提供格式。这是它的要点：WebPjpgpng

对于HTML，使用<picture>HTML5 标签：

<picture>
    <source srcset="img/my_image.webp" type="image/webp">
    <source srcset="img/my_image.jpg" type="image/jpeg">
    <img class="img-fluid" src="img/my_image.jpg" alt="Alt Text!">
</picture>

Run Code Online (Sandbox Code Playgroud)

对于CSS：

添加Modernizr.js脚本来检测浏览器是否支持 WebP 格式。您可以自定义脚本以仅查找 WebP 支持，而不查找其他内容，以最大限度地减少开销：

<script src="modernizr.min.js"></script>

这将向元素添加或webp类no-webp，<html>具体取决于浏览器对 WebP 的支持：

<html lang="en" class="webp"> 或者 <html lang="en" class="no-webp">
使用上面的类加载适当的图像：

.no-webp .elementWithBackgroundImage {
    background-image: url("image.jpg"); 
}
.webp .elementWithBackgroundImage{
    background-image: url("image.webp");
}

Run Code Online (Sandbox Code Playgroud)

为了避免 JavaScript 在浏览器中被禁用并无法运行脚本的可能性，请向标签modernizr.min.js添加一个类：no-js<html>

<html class="no-js">

并在任何其他脚本之前添加以下内容：

<script>
    document.documentElement.classList.remove("no-js");
</script>

Run Code Online (Sandbox Code Playgroud)

如果启用了 JavaScript，这将在浏览器执行时删除no-js元素上的类。<html>否则，它将永远不会被解析，并且no-js类将保留。因此，使用此类提供默认图像：

.no-js .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年前
查看次数：	56213 次
最近记录：	4 年，1 月前