Резервные фоновые изображения загружаются в 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 резервное фоновое изображение, которое загружается только тогда, когда фоновое изображение по умолчанию игнорируется?

Источник

3 ответа

Привет, используйте этот код в своем элементе css, где вы хотите 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 );
}

Браузер попытается загрузить WEBP, и если это не поможет. или есть код ошибки, он загрузит JPG.

Для <img> элемент, вы можете использовать этот "хак", который на 100% работает на моих сайтах во всех распространенных браузерах по состоянию на 14.10.2020:

<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'), 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> подход

Источник

На основании информации, предоставленной 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 для улучшения обнаружения браузера.

Источник
Другие вопросы по тегам