Webp实现

Question

我如何实现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>


  

Answer 1

看起来webp越来越被广泛接受，如果你进入SEO，它确实会显着提高加载速度。

看起来你正在做两件不同的事情。为了在体内实现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")
}