2022 年处理 Safari 和 .webp 图片

Dealing with Safari and .webp images in 2022

我已经等 .webp 图像非常 很长时间了。

现在是 2022 年，所以，给定：

我前天决定冒险尝试将网站上的一堆 .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 背景图像，因此创建后备选项的选项更加有限：

我是否仅限于通过 PHP 进行浏览器嗅探，如下所示：

if (preg_match('/Mac OS X/', $_SERVER['HTTP_USER_AGENT'])) {

  $Body_Element_CSS_Class_List .= ' oh-no-here-comes-safari';
}

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

是的，很难为 CSS background-images

提供后备方案

在我的问题中我写道：

If I were using marked-up images, declaring one or more fallback images is elementary [...]

But (sigh) in this instance, the images are CSS background-images, so options for creating fallbacks are more limited

至少现在，- 即。虽然我们仍在等待（2022 年）广泛 cross-browser 支持 CSS image-set() 功能 - 这是真的。

但是一个marked-up<img>可以替换每个CSSbackground-image

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

For what most people use background images for you can nowadays easily use object-fit + object-position.

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

这对我来说是个新闻。我完全隐约意识到 object-fit CSS property, but I'd never come across the object-position CSS 属性。

但这绝对有效！！

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

如果 image-set() 有广泛的 cross-browser 支持，这就是我的意图 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;
}

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

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

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