在Firefox中加载后备背景图片

问题描述

我一直在改善我的网站页面速度。我计划使用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'),255) 100%);
}

这在Chrome中工作正常，在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'),255) 100%);
}

有没有办法在Firefox中提供仅提供默认背景图片时才加载的后备背景图片？

解决方法

嗨，在您要使用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'">

任何问题请发表评论，谢谢

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

<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'),255) 100%);
  }
}

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

请注意：如果您加载avif，将无法显示它。

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

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

它们具有类似的浏览器支持

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

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

HTML

<body>
  <div class="banner"></div>
  <script src="https://unpkg.com/[email protected]/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'),255) 100%);
}

.banner-bg-avif {
  background-size: cover;
  background-image: url('photo.avif'),255) 100%);
}

Working Example

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