Fallback Background Images loads in Firefox

Question

I have been working on my websites page speed improvement. I planned to use AVIF format images. This image format is supported only in the latest Chrome browser versions. In order to provide a fallback image, I have used this 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%);
}

This works fine in Chrome, where only the AVIF bg image is loaded and the jpg format is ignored. In older versions of Chrome, the AVIF format is ignored, and the jpg format is loaded.

Only one image is loaded in the page. Whereas in Firefox and other browsers, AVIF format is ignored and jpg is not loaded. I tried using the code below, which works, but both the format images are loaded in the page, which increases my page size.

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

Is there a way to provide a fallback background image in Firefox, which loads only when the default background image is ignored?

cant you use an `img` tag? because there is an solution with `picture` tag — bill.gates, Oct 14 '20 at 09:17
I cant use it, as i need to change the entire html structure.. — Dinesh M, Oct 14 '20 at 09:21
Positive side note: Firefox 87 supports the avif image format too. — Lonnie Best, Mar 02 '21 at 16:41

score 1 · Answer 1 · answered Oct 14 '20 at 09:23

1

Hi use this code in your css element where you want the bg + fallbackbg:

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

The browser will try to load the WEBP and if it's not avail. or there is an error code it will load the JPG.

For an <img> element, you can use this 'hack' that works 100% tested on my sites all common browsers as of 14.10.2020:

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

Any questions just comment please thanks

answered Oct 14 '20 at 09:23

avia

1,527
7
19

Great !! This works in all browser except Microsoft Edge. My Edge Browser version is 86.0.622.38. Is there any way to achieve this in Edge browser? – Dinesh M Oct 14 '20 at 09:45
@DineshM I'm not sure why its not working.. https://caniuse.com/mdn-css_properties_background-image_multiple_backgrounds – avia Oct 14 '20 at 09:48
it should fall back on the jpg. its not displaying any image? also it supports the -webkit-image-set https://caniuse.com/?search=-webkit-image-set – avia Oct 14 '20 at 09:52

bill.gates · Answer 2 · 2020-10-14T09:46:25.847

Usually an fallback works like this:

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

However if you want do to it with background-image you can try to use a combination with @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%);
  }
}

Since content-visibility has also very low browser support you can check if the browser has it and if yes you load the avif image.

Note here: Its not guaranteed that if you load the avif that it will be displayed.

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

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

They have similar browser support

Also some very old browsers dont support @supports. I reccommend to use <picture> approach

score 0 · Answer 3 · answered Oct 14 '20 at 15:41

Based on the information provided by caniuse Chrome versions 85 and up support the avif format. With that in mind, you could implement a rudimentary Browser detection using JavaScript, and dynamically add a class that makes reference to the desired file format:

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

Note: The general consensus seems to be that that native user agent detection is somewhat unreliable, that's why this example leverages Bowser to improve Browser detection.

Fallback Background Images loads in Firefox

3 Answers3

Linked