Webp Реализация - PullRequest
Новая
       66

Webp Реализация

0 голосов
/ 29 ноября 2018

Как я могу реализовать запасной вариант для формата webp или мне вообще нужно заботиться о webp?

Я пытался, но это не совсем работает.где моя ошибка? 

.bgimg-1 {
    background-position: center center;
    background-size: cover;
    background-image: url("background.jpg");
    min-height: 100%;
}
<!-- Header with full-height image -->
<header class="bgimg-1 w3-display-container w3-animate-opacity" id="home">
  
  <picture>
  <source srcset="img/background.webp" type="image/webp">
  <source srcset="img/background.jpg" type="image/jpeg"> 
  <img class="logo" src="img/background.jpg" alt="Alt Text!">
</picture>


  
  <div class="w3-display-bottomleft w3-text-red w3-large w3-grayscale-min" style="padding:24px 48px">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-weibo w3-hover-opacity"></i>
    <i class="fa fa-wechat w3-hover-opacity"></i>
    </div>
</header>

1 Ответ

0 голосов
/ 12 марта 2019

Похоже, что webp получает все большее признание, и это значительно увеличивает скорость загрузки, если вы занимаетесь SEO.

Похоже, вы делаете 2 разные вещи.Для реализации webp в теле вы можете использовать (вместо обычного тега img): 

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

, если вы хотите внедрить его в css (для фоновой картинки, которую вы пытаетесь загрузить)Я бы порекомендовал этот способ вместо: 

.bgimg-1{
   background-position: center center;
   background-size: cover;
   background-image:image("background.webp", "background.jpg")
}
...