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

Question

在我的网站上，我已经添加了所有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>

浏览器很聪明，只下载和使用最好的支持的图片。

Answer 2

我没有评论的名声，但我想投稿一个（很可能是脾气化的）CSS背景解决方案，除了这个 <picture> 选项。

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

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

background-image: url("exampleimage.webp"); /* Firefox */
background-image: -webkit-image-set(
            url("exampleimage.webp") 1x,
            url("[email protected]") 1.5x,
            url("[email protected]") 2x
        );
background-image: image-set(
            url("exampleimage.jpg") 1x,
            url("[email protected]") 1.5x,
            url("[email protected]") 2x
        ) /* Safari */

Answer 3

在macOS大苏尔以及iOS、iPadOS & 公司的Safari 14中已经加入了WebP官方支持。

源。https:/www.macrumors.com20200622webp-safari-14

Answer 4

我建议使用能帮助你将图片转换为WebP的扩展，而不是上传已经转换好的图片。该 WebP扩展 自动将图像转换为WebP格式的软件，可以将你的原始PNG或JPG图像复制出来，并显示给那些来自不支持WebP的网站的人。这样就不会有人看到破损的图片了。