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

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

截至今天，Safari 不支持webp格式，我不确定它是否计划在不久的将来实施。但是您可以让浏览器选择是使用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>

浏览器足够智能，可以下载并使用最佳支持的图像。

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

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

更新：

现在似乎有一种官方方法可以做到这一点，但截至目前(2021 年 11 月(，Safari 还不支持它(惊喜！
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 */

您可以按照此处的建议在浏览器支持时提供WebP格式，如果不支持，则提供jpg或png格式。这是它的要点：

对于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>

对于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");
}

要绕过 JavaScript 在浏览器中被禁用并且无法运行modernizr.min.js脚本的可能性，请在<html>标记中添加一类no-js：
<html class="no-js">

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

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

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

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

Safari14 中支持 WebP 图像格式，在较旧的 Safari 版本中无法支持 webp 图像。您不能只更改 webp 文件以使它们在不支持它的不兼容 Safari 版本上运行。这是行不通的。

因此，对于较旧的 safari 版本，您唯一的解决方案是以 PNG 或 JPG 格式维护每个图像的副本，或使用图像 CDN 自动为您执行此操作。图像 CDN 获取图像文件(JPEG 或 PNG(，并在浏览器支持的情况下将其动态转换为 webp 图像格式。否则，它会以 JPEG 或 PNG 格式提供图像，以保持工作正常而不会有任何损坏。

相关内容

最新更新

热门标签：