2022 年处理 Safari 和 .webp 图像答案

【问题标题】：Dealing with Safari and .webp images in 20222022 年处理 Safari 和 .webp 图像
【发布时间】：2022-05-13 06:58:22
【问题描述】：

我已经等待使用.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';
}

我可以采用比浏览器检测更好/更可靠的方法吗？

【问题讨论】：

在此处查看有关背景图像的答案之一：stackoverflow.com/questions/58487035/…
谢谢，@Rob。你的意思是哪个答案？维罗妮卡瓦特的回答？我认为这个答案已经过时了。
就是那个，但我可能看得太快了，因为我不得不离开。
@Rob - 不用担心。老实说，在我完全理解它之前，我必须阅读 Veronica 的答案 2-3 次。无论如何，我感谢您对上述问题感兴趣。在哪一点上......我想我可能已经找到了解决方案。我现在正在测试它。如果一切正常，我会写在下面。

标签： css macos background-image webp browser-detection

【解决方案1】：

是的，很难为 CSS 背景图像提供后备

在我的问题中我写道：

如果我使用标记图像，声明一个或多个备用图像是基本的 [...]

但是（叹气）在这种情况下，图像是 CSS background-images，因此创建后备的选项更加有限

现在，至少， - 即。虽然我们仍在等待（2022 年）对 CSS image-set() 函数的广泛跨浏览器支持 - 这是真的。

但是标记的 `<img>` 可以替换每个 CSS 背景图像

在我四处寻找替代方法时，我意外地看到了 Quentin Albert 在 2021 年 7 月发表的评论：

对于大多数人使用背景图像的原因，您现在可以轻松使用 object-fit + object-position。

来源： https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/

这对我来说是个新闻。我隐约知道object-fit CSS 属性，但我从来没有遇到过object-position CSS 属性。

但它绝对有效！

如果 `image-set()` 有支持，我会使用的 CSS

如果image-set() 有广泛的跨浏览器支持，这就是我想要的 CSS，它将为 Safari 启用后备图像：

.my-image-1 {
  background-image: url(image-set('my-sprited-images.webp', 'my-sprited-images.png'));
  background-position: 0, 0;
}

.my-image-2 {
  background-image: url(image-set('my-sprited-images.webp', 'my-sprited-images.png'));
  background-position: -100px, 0;
}

我可以改用 HTML + CSS（感谢`object-position`）

由于上述内容不太可靠，我可以改为在 HTML 中声明后备图像并使用 object-position 定位它：

HTML：

<picture>
  <source srcset="my-sprited-images.webp" type="image/webp">
  <source srcset="my-sprited-images.png" type="image/png"> 
  <img class="my-image-1" src="/my-sprited-images.png" alt="My Image 1">
</picture>


<picture>
  <source srcset="my-sprited-images.webp" type="image/webp">
  <source srcset="my-sprited-images.png" type="image/png"> 
  <img class="my-image-2" src="/my-sprited-images.png" alt="My Image 2">
</picture>

CSS：

.my-image-1 {
  object-position: 0 0;
}

.my-image-2 {
  object-position: -100px 0;
}

【讨论】：

【解决方案2】：

我遇到了同样的问题，但我相信今天解决 CSS 背景图像的一种好方法是使用Modernizr。

在该链接中，您可以创建一个 Modernizr 脚本构建，专门验证浏览器中的 webp 支持。然后您只需将脚本添加到<head>，它就会根据您正在验证的功能将类添加到<html>。因此，例如，为 CSS 背景图像加载不同的图像格式：

.webp .image {
  background-image: url('/image.webp');
}
.no-webp .image {
  background-image: url('/image.png');
}

【讨论】：

在我的 Web 开发方法中，我尽量避免使用第三方依赖项，但我同意对于任何喜欢使用 Modernizr 等第三方依赖项的人来说，这是一个可行的解决方案。跨度>
我发现这是最简单的解决方案，还因为可以从自己的服务器加载 Modernizr 脚本，甚至可以粘贴到自己的 Javascript 文件中，该文件将/应该在 head 部分下载。对于想要了解有关此方法的更多信息的人，我建议您阅读这篇文章：css-tricks.com/using-webp-images。

是的，很难为 CSS 背景图像提供后备

但是标记的 &lt;img&gt; 可以替换每个 CSS 背景图像

如果 image-set() 有支持，我会使用的 CSS

我可以改用 HTML + CSS（感谢object-position）

但是标记的 `<img>` 可以替换每个 CSS 背景图像

如果 `image-set()` 有支持，我会使用的 CSS

我可以改用 HTML + CSS（感谢`object-position`）