Background-image - Webp，在较旧的 Safari 版本中显示答案

【问题标题】：Background-image - Webp, display in older Safari versionsBackground-image - Webp，在较旧的 Safari 版本中显示
【发布时间】：2021-10-21 23:46:10
【问题描述】：

我需要在旧 Safari 版本中以 background-image 显示我的 .png，而对于其余浏览器，只需显示 .webp 格式。

我只需要通过 CSS 和 HTML 来完成。没有插入脚本。（@supports 也不支持旧的 Safari 版本）。

感谢您的建议！

【问题讨论】：

到目前为止你有什么尝试？
好吧，我不知道有什么办法，我只有@supports 的想法，但正如我所说，它不受支持。使用不是选项作为它的背景图片

标签： html css sass safari

【解决方案1】：

Safari 目前不支持 webp 格式，我不确定它是否计划在不久的将来实施。但是你可以让浏览器选择是像这样使用 webp 还是 jpg。

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

你可以给一个后备或默认的img

参考这个 - How to add webp support in Safari browser

【讨论】：

嗯，这看起来像是我一直在寻找的东西，遗憾的是我将有机会在周一在 IOS 上对其进行测试，如果它有效，您将获得赏金 :) 谢谢伙计！
您好，我刚刚在 Safari 上测试过，遗憾的是这个选项不起作用。图像仍然不显示。

【解决方案2】：

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

以上示例允许浏览器选择 .jpeg 或 .webp 图像。

就 .webp 而言，它在 Safari 14 上可用

Answer Source

【讨论】：

我需要
上的 background-img，而不是。不过谢谢你的回答。

【解决方案3】：

<picture>
  <source type="image/svg+xml" srcset="stackoverflow.svg">
  <source type="image/webp" srcset="stackoverflow.webp">
  <img src="stackoverflow.png">
</picture>

这允许浏览器拒绝不支持的文件类型。

Source

【讨论】：