如何在Safari浏览器中添加对WebP格式的支持

Question

如何在Safari浏览器中添加对WebP格式的支持

imagesafariwebp

46

在我的网站上，我已经将所有的图片都添加为webp格式。所有这些图片在Chrome和Firefox浏览器中都能正常显示，但是它们在Safari浏览器中无法正确显示。

- wohifov

16

最终，Safari 14已经支持webp格式的图片。截至2020年6月23日，Safari 14仍在测试中，将会在今年晚些时候发布。尽管需要一些时间让更多人开始使用，但这仍然是个好消息。 - Matthew C

5个回答

56

WebP 官方支持已经在 macOS Big Sur 上的 Safari 14，以及 iOS、iPadOS 和相关设备上添加。

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

- serniko97

2

提醒一下，Big Sur和iOS14仍处于测试版阶段，因此普通用户要等到今年秋季后期才能看到它们。 - user2619824

3

根据发布说明https://developer.apple.com/documentation/safari-release-notes/safari-14-release-notes，这已经被添加到Safari 14的稳定版本中。我无法使用Safari，但如果有人可以，我真的很想得到确认。您可以在此处进行测试 https://developers.google.com/speed/webp/gallery1 - Haze

1

@Haze，我目前也没有访问权限，但CanIUse现在也显示它了：https://caniuse.com/webp - Veronica Watt

1

但是 macOS 10.x 仍在使用中（而且 statcounter 甚至无法统计有多少人正在使用 macOS 11+ https://gs.statcounter.com/os-version-market-share/macos/desktop/worldwide） - David Cook

13

更新:

现在似乎有一种官方的方法（使用image-set提供备用图像格式）来实现这一点，但截至目前为止（2021年11月），Safari尚未支持（意外！）。
Firefox终于加入了image-set阵营，而且不需要前缀。
Safari终于支持WEBP格式，因此这个“解决方案”已经不再有用了~~（除非你想用它来支持AVIF或其他未来格式）~~请参见第1个条款。

我没有评论的声誉，但我想提供一个（可能反复无常的）CSS背景解决方案，除了<picture>选项以外。

截至目前，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 */

- Veronica Watt

图片集样式属性得到了相对广泛的支持。https://caniuse.com/#feat=css-image-set - Dylan Maxey

1

@DylanMaxey 是的先生！但是，正如提到的那样，Safari是唯一不需要前缀（-webkit-）的浏览器，因此它是唯一可以在没有前缀的情况下读取值的浏览器。此外，我在这里要重申，这个“解决方案”将来可能无法使用，因为非前缀支持可能会扩大。但是我希望到那时Safari将接受WEBP。所以，自行决定是否使用。 - Veronica Watt

5

如果浏览器支持，可以按照此处的建议提供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>

这将向<html>元素添加webp或no-webp类，具体取决于浏览器是否支持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");
}

- Nata

0

WebP图像格式的支持在Safari 14中可用，而在旧版Safari中不支持webp图像。您不能仅更改webp文件以使其在不支持它的不兼容Safari版本上工作。这是行不通的。

因此，对于旧版Safari，您唯一的解决方案是保留每个图像的PNG或JPG格式副本，或使用image CDN自动执行此操作。图像CDN将图像文件（JPEG或PNG）即时转换为WebP图像格式（如果浏览器支持）。否则，它会以JPEG或PNG格式提供图像，以确保一切正常运行，没有任何故障。

- Hamid Sarfraz

1

你是否有其他关于你提到的CDN支持的参考资料？在你提供的链接中没有提到文件格式转换。 - Raine Revere

该插件页面说明了这一点。 - Hamid Sarfraz

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

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

- GEkk · Accepted Answer

截至今天，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>

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