Jpg вариант резервного копирования для веб-сайтов с использованием фонового изображения? - PullRequest
Новая
       37

Jpg вариант резервного копирования для веб-сайтов с использованием фонового изображения?

0 голосов
/ 15 апреля 2020

Я использую Vue для своего проекта. Многие из моих изображений сделаны с использованием background-image. 

 <div :style="`background:url('${user.image});`"></div>

По словам Google, если я использую, я могу настроить: 

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Есть ли способ сделать что-то подобное для background-image?

1 Ответ

2 голосов
/ 15 апреля 2020

Не существует действительно CSS единственного решения, вам придется положиться на javascript для этого.

Лучше всего, вероятно, иметь изображение webx размером 1x1px и попытаться загрузить его, чтобы затем установить флаг.
К сожалению (?) Этот процесс асинхронный. 

function testWebPSupport() {
  return new Promise( (resolve) => {
    const webp = "data:image/webp;base64,UklGRkAAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAIAAAAAAFZQOCAYAAAAMAEAnQEqAQABAAFAJiWkAANwAP79NmgA";
    const test_img = new Image();
    test_img.src = webp;
    test_img.onerror = e => resolve( false );
    test_img.onload = e => resolve( true );
  } );
}

(async ()=> {

  const supports_webp = await testWebPSupport();
  console.log( "this browser supports webp images:", supports_webp );
  // for stylesheets
  if( !supports_webp ) {
    document.body.classList.add( 'no-webp' );
  }
  // for inline ones, just check the value of supports_webp
  const extension = supports_webp ? 'webp' : 'jpg';
//  elem.style.backgroundImage = `url(file_url.${ extension })`;

})();
.bg-me {
  width: 100vw;
  height: 100vh;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/98/Great_Lakes_from_space_during_early_spring.webp);
  background-size: cover;
}
.no-webp .bg-me {
  /* fallback to png */
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Great_Lakes_from_space_during_early_spring.webp/800px-Great_Lakes_from_space_during_early_spring.webp.png);
}
<div class="bg-me"></div>
...