在 Firefox 中加载后备背景图像答案

【问题标题】：Fallback Background Images loads in Firefox在 Firefox 中加载后备背景图像
【发布时间】：2021-01-28 16:06:09
【问题描述】：

我一直致力于提高我的网站页面速度。我计划使用 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 中提供后备背景图片，仅在默认背景图片被忽略时才加载？

【问题讨论】：

不能使用img 标签吗？因为有picture标签的解决方案
我无法使用它，因为我需要更改整个 html 结构..
@DineshM 看到我的回答 :)
正面说明：Firefox 87 也支持 avif 图像格式。

标签： html css pagespeed fallback avif

【解决方案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> 元素，您可以使用这个“hack”，它在我的网站上 100% 测试，截至 2020 年 10 月 14 日所有常见浏览器：

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

有任何问题欢迎评论，谢谢

【讨论】：

太棒了！！这适用于除 Microsoft Edge 之外的所有浏览器。我的 Edge 浏览器版本是 86.0.622.38。有什么方法可以在 Edge 浏览器中实现这一点？
@DineshM 我不确定为什么它不起作用.. caniuse.com/…
它应该依靠 jpg。它不显示任何图像？它还支持 -webkit-image-set caniuse.com/?search=-webkit-image-set

【解决方案2】：

通常后备的工作方式如下：

<picture>
  <source srcset="img/Image.avif" type="image/avif">
  <img src="img/image.jpg" alt="Alt Text!" type="image/jpg">
</picture>

但是，如果您想与 background-image 一起使用，您可以尝试使用与 @supports 的组合

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

  @supports(content-visibility: auto) {
    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%);
  }
}

由于content-visibility 的浏览器支持也很低，您可以检查浏览器是否支持，如果支持，则加载 avif 图像。

请注意：不保证加载 avif 时会显示。

https://caniuse.com/?search=avif

https://caniuse.com/?search=content-visibility

他们有类似的浏览器支持

还有一些非常老的浏览器不支持@supports。我建议使用<picture> 方法

【讨论】：

【解决方案3】：

根据caniuse 提供的信息，Chrome 85 及更高版本支持avif 格式。考虑到这一点，您可以使用 JavaScript 实现基本的浏览器检测，并动态添加一个引用所需文件格式的类：

HTML

<body>
  <div class="banner"></div>
  <script src="https://unpkg.com/bowser@2.10.0/es5.js"></script>
  <script>

    // Get the banner
    const banner = document.querySelector('.banner');

    // Initialize bowser and get the results
    const  { parsedResult } = bowser.getParser(window.navigator.userAgent);

    // Isolate the browser
    const { browser } = parsedResult;

    // Get the version number and name for Chrome
    const verNumber = Number(browser.version.split('.')[0]);
    const browserName = browser.name;

    // Conditionally load backgrounds
    if (browserName == 'Chrome' && verNumber >= 85) {
      banner.classList.add('banner-bg-avif');
    } else {
      banner.classList.add('banner-bg-jpg');
    }
  </script>
</body>

CSS

.banner {
  height: 400px;
}

.banner-bg-jpg {
  background-size: cover;
  background-image: url('photo.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-avif {
  background-size: cover;
  background-image: url('photo.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

Working Example

注意：general consensus 似乎是本机用户代理检测有些不可靠，这就是本示例利用 Bowser 来改进浏览器检测的原因。

【讨论】：