时间戳

首页 > 解决方案 > 在 Firefox 中加载后备背景图像

html - 在 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'), 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 中提供后备背景图像，它仅在默认背景图像被忽略时加载？

标签： htmlcsspagespeedfallbackavif

解决方案

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

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

推荐阅读