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

Posted

技术标签:

【中文标题】如何在 Safari 浏览器中添加 webp 支持【英文标题】:How to add webp support in Safari browser 【发布时间】:2020-02-17 14:04:46 【问题描述】:

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

【问题讨论】:

最后,Safari 14 增加了对 webp 图片的支持。截至 2020 年 6 月 23 日,Safari 14 处于测试阶段,将于今年晚些时候发布。采用需要一些时间,但这是个好消息。 【参考方案1】:

到目前为止,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>

浏览器足够智能,可以只下载和使用受支持的最佳图像。

【讨论】:

这是一个很好的答案,因为它有第二个源标签作为后备,如果它只有一个,那么某些 safari 版本会出现问题。 这是替代img html 标记的绝佳解决方案,但如果图像在CSS 中以background-image 的形式出现,该怎么办?另外,我不是必须复制每张图像的想法的忠实粉丝。希望有另一种方式。 1x、2x 是什么意思? 这意味着像素密度,如果显示器支持更密集的像素,浏览器将使用更大的图像。您可以添加宽度属性,但不能同时添加,我只是希望浏览器会为用户设备选择正确的属性。 希望此解决方案不会影响任何与 seo 相关的问题以及谷歌浏览页面的情况。【参考方案2】:

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

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

【讨论】:

提个醒,但 Big Sur 和 iOS14 仍处于测试阶段,所以一般民众要到今年秋天晚些时候才能看到。 根据发行说明developer.apple.com/documentation/safari-release-notes/…,现在已将其添加到 safari 14 的稳定版本中@ 我无法访问 Safari,但如果有人可以,我真的很想确认这一点。你可以在这里测试它developers.google.com/speed/webp/gallery1 @Haze 我目前也没有访问权限,但 CanIUse 现在也显示它:caniuse.com/webp 但 macOS 10.x 仍在使用中(statcounter 甚至无法计算有多少人在使用 macOS 11+ gs.statcounter.com/os-version-market-share/macos/desktop/…)【参考方案3】:

更新:

现在似乎有一个 official way 可以执行此操作,但截至目前(2021 年 11 月)Safari doesn't support it yet(惊喜!)。 Firefox 终于成为了图像集的潮流。它也不需要前缀。 Safari 终于支持 WEBP,所以这个“解决方案”不再有用(除非你想将它用于 AVIF 或其他未来格式)参见要点 1。

我没有评论的声誉,但除了&lt;picture&gt; 选项之外,我还想提供一个(可能是喜怒无常的)CSS 背景解决方案。

截至目前,Safari(两个版本)是唯一不支持WEBP的主要浏览器,它似乎也是唯一支持image-set without a prefix的浏览器。

所以,如果我们使用三个代码块来允许所有浏览器完全回退,那么它看起来像:

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 */

【讨论】:

对 image-set style 属性的支持比较广泛。 caniuse.com/#feat=css-image-set @DylanMaxey 是的!但是,如前所述,Safari 是唯一不需要前缀 (-webkit-) 的浏览器,因此是唯一无需前缀即可读取值的浏览器。另外,虽然我在这里,但我要重申,这种“解决方案”将来可能不起作用,因为非前缀支持可能会扩大。但我希望届时 Safari 将接受 WEBP。因此,使用风险自负。【参考方案4】:

您可以按照建议here 在浏览器支持时提供WebP 格式,如果不支持则按照jpgpng。这是它的要点:

对于HTML,使用&lt;picture&gt; 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" >
</picture>

对于CSS

    添加modernizr.js 脚本来检测浏览器是否支持WebP 格式。您可以customize 脚本只寻找 WebP 支持,而不是其他,以尽量减少开销:

    &lt;script src="modernizr.min.js"&gt;&lt;/script&gt;

    这会将webpno-webp 类添加到&lt;html&gt; 元素,具体取决于浏览器对WebP 的支持:

    &lt;html lang="en" class="webp"&gt; 要么 &lt;html lang="en" class="no-webp"&gt;

    使用上面的类来加载合适的图片:

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

.webp .elementWithBackgroundImage
    background-image: url("image.webp");

    要避免 javascript 在浏览器中被禁用并且无法运行 modernizr.min.js 脚本的可能性,请将 no-js 类添加到 &lt;html&gt; 标记:

    &lt;html class="no-js"&gt;

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

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

如果启用了 JavaScript,这将在浏览器执行时删除 &lt;html&gt; 元素上的 no-js 类。否则,它永远不会被解析,no-js 类将保留。 因此,使用这个类来提供默认图像:

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

【讨论】:

【参考方案5】:

Safari 14 支持 WebP 图片格式,旧版 Safari 不支持 webp 图片。您不能只更改 webp 文件以使它们在不支持它的不兼容 Safari 版本上工作。它不会起作用。

因此,对于较旧的 safari 版本,您唯一的解决方案是为每张图片保留一份 PNG 或 JPG 格式的副本,或者使用 image CDN 自动为您执行此操作。如果浏览器支持,图像 CDN 会获取图像文件(JPEG 或 PNG)并将其动态转换为 webp 图像格式。否则,它会以 JPEG 或 PNG 格式提供图像,以保持工作正常而不会损坏。

【讨论】:

对于您所指的 CDN 支持,您还有其他参考吗?您提供的链接中没有提到文件格式转换。 plugin page 声明了这一点。

以上是关于如何在 Safari 浏览器中添加 webp 支持的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Webp图像和支持野生动物园

FirefoxEdge均将支持WebP图片格式(该格式来自Google)

JPG vs JPEG2000 vs WebP

Magento 2 - 如何在 Fotorama JS 中替换 webP 图像

windows下查看webp格式图片

IIS 服务器阻止访问 .webp 文件