我一直在等待使用 .webp 图片很很长时间。
现在是 2022 年，所以，给定:
- 图像格式已经存在了十年
- Chrome 于 2014 年 1 月开始支持
.webp - Firefox 于 2019 年 1 月开始支持
.webp
我前天决定冒险尝试将网站上的一堆.png图像转换为.webp图像。
菜鸟错误。因为，当然，我应该检查:https://caniuse.com/webp首先，这会告诉我 Safari 在 macOS 11.0 Big Sur(2020 年 11 月) 之前的任何版本上 不 支持 .webp 图片。
但是我已经厌倦了等待。所以...我想 Safari 可以继续使用 .png 图片。
因为我绝对确实想为 Firefox、Brave、Chrome、Edge、Opera 等用户提供 .webp 图像。
如果我使用标记图像，声明一个或多个后备图像是基本的:
<picture>
<source srcset="a-webp-for-most-browsers.webp" type="image/webp">
<source srcset="a-png-for-safari.png" type="image/png">
<img src="a-png-for-safari.png" alt="My Image">
</picture>
但是(叹息)在这种情况下，图像是 CSS 背景图像，因此创建回退的选项更加有限:
- CSS
image-set还有pretty low support目前 - 使用
@supports的 CSS 功能查询不会扩展到图像格式。
我是否仅限于通过 PHP 进行浏览器嗅探，如下所示:
if (preg_match('/Mac OS X/', $_SERVER['HTTP_USER_AGENT'])) {
$Body_Element_CSS_Class_List .= ' oh-no-here-comes-safari';
}
有没有比浏览器检测更好/更可靠的方法？
最佳答案
我有同样的问题，但我相信今天解决 CSS 背景图像的一个好方法是使用 Modernizr .
在该链接中，您可以制作一个 Modernizr 脚本构建，专门验证浏览器中的 webp 支持。然后你只需要将脚本添加到 <head>它将向 <html> 添加类基于您正在验证的功能。因此，例如，要为 CSS 背景图像加载不同的图像格式，您可以执行以下操作:
.webp .image {
background-image: url('/image.webp');
}
.no-webp .image {
background-image: url('/image.png');
}
关于css - 2022 年处理 Safari 和 .webp 图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71079702/