在 Firefox 中加载后备背景图像

Question

我一直致力于提高我的网站页面速度。我计划使用 AVIF 格式的图像。此图像格式仅在最新的 Chrome 浏览器版本中受支持。为了提供后备图像，我使用了这个 CSS：

.banner-bg {
  background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

.banner-bg{
  background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

这在 Chrome 中工作正常，其中仅加载 AVIF bg 图像并忽略 jpg 格式。在旧版本的 Chrome 中，忽略 AVIF 格式，加载 jpg 格式。

页面中只加载了一张图片。而在 Firefox 和其他浏览器中，忽略 AVIF 格式并且不加载 jpg。我尝试使用下面的代码，它有效，但两种格式的图像都加载到页面中，这增加了我的页面大小。

.banner-bg {
  background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

有没有办法在 Firefox 中提供后备背景图像，它仅在默认背景图像被忽略时加载？

Answer 1

您好，在您需要 bg + Fallbackbg 的 css 元素中使用此代码：

bg {
background-image: url(/images/top-landing-home-cropped.jpg);
background-image: -webkit-image-set(url(/images/top-landing-home-cropped.webp)1x );
}

浏览器将尝试加载 WEBP，如果加载失败。或者有错误代码，它将加载 JPG。

对于<img>元素，您可以使用此“黑客”，截至 2020 年 10 月 14 日，该“黑客”在我的网站上所有常见浏览器上均经过 100% 测试：

<img alt="" src="/images/xx.webp" onerror="this.onerror=null; this.src='/images/xx.png'">

有任何问题请评论谢谢