使用 background-image css 属性优先化 avif 格式答案

【问题标题】：Prioritize avif format with background-image css property使用 background-image css 属性优先化 avif 格式
【发布时间】：2021-03-30 09:36:06
【问题描述】：

我用 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 here。即使是 Firefox 和 chrome 也不能很好地解释这段代码。任何想法？我是否正在尝试浏览器仍在草稿中的东西？

【问题讨论】：

很高兴看到一些对更多图像格式的主动支持，+1。

标签： css image background-image avif

【解决方案1】：

你有正确的线索。 image-set 属性还不支持类型声明。这目前是您还链接的 CSS4 草案版本的一部分：https://drafts.csswg.org/css-images-4/

目前，我只是使用https://avif.io/ 将我的图像转换为 AVIF，并使用检测脚本将“avif”类添加到我的 HTML 中。那么就这么简单：

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

检测脚本有几种类型：

另一种 hacky 方法是对内容可见性功能进行媒体查询，因为它与 Chrome 和 Opera 中的 AVIF 支持发布的版本相同。但是我不会依赖于生产应用程序。

希望这对您有所帮助。 :)

【讨论】：