使用background-image CSS属性时，如何优先考虑使用avif格式？

Question

我使用avif格式重新设计了我的应用程序以适配手机设备（即使并非所有设备都支持它）。

这段代码可以很好地工作，如果浏览器支持，将优先使用avif格式：

<picture>
   <source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
   <img src="image.jpg" alt="nice dog" />
</picture>

但我也得到了一些作为background-image CSS属性的图像。我尝试使用image-set属性，但没有成功。

div {
  background-image: -webkit-image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
  background-image: image-set(
        url('image.avif') type("image/avif"),
        url('image.jpg') type("image/jpeg"));
}

我看了这个例子2。 即使是Firefox和Chrome也无法很好地解释这段代码。有什么想法吗？我是不是在尝试一些浏览器仍处于草案阶段的东西？

- PestoP

---

很高兴看到对更多种类的图像格式有积极的支持，加一。 - John

Answer 1

你有正确的线索。image-set属性尚未支持类型声明。这是CSS4草案版本的一部分，你也提供了链接: https://drafts.csswg.org/css-images-4/ 现在，我只需使用https://avif.io/将我的图像转换为AVIF格式，并使用检测脚本向HTML添加一个“avif”类。然后就像这样简单：

.image {background-image:url("image.jpg")}
.webp .image {background-image:url("image.webp")}
.avif .image {background-image:url("image.avif")}

有几种检测脚本：

• https://dev.to/nucliweb/detect-avif-image-support-to-use-in-your-css-4pen
• https://github.com/djpogo/avif-webp-css-support
• https://avif.io/blog/tutorials/use-avif-in-css/（即将上线）

另一种方法是为内容可见性特性制作媒体查询，因为它与 Chrome 和 Opera 中的 AVIF 支持版本同时发布。但是在生产应用程序中我不会依赖它。

希望这可以帮助您。 :)

- Justin Schmitz