6

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

4

3 回答 3

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'">

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

于 2020-10-14T09:23:36.037 回答
1

通常一个后备工作是这样的：

<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>方法

于 2020-10-14T09:31:13.973 回答
0

根据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%);
}

工作示例

注意：普遍的共识似乎是原生用户代理检测有些不可靠，这就是为什么这个例子利用Bowser来改进浏览器检测。

于 2020-10-14T15:41:51.553 回答