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，它确实可以显着提高加载速度。

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

Answer 2

将webp图像添加到您的站点绝对可以考虑提高页面加载速度，但是并不是所有的浏览器都支持这种新格式(例如，Internet Explorer不支持它)。此外，您建议的实现会使html变得相当复杂。

解决这个问题的一种优雅方法是为支持webp图像的浏览器动态提供webp图像，因为后者确实在请求头部中提到了它们支持的格式。

下面是建议的实现，不需要更改html

<header class="bgimg-1 w3-display-container w3-animate-opacity" id="home">
<img class="logo" src="img/background.jpg" alt="Alt Text!">

将img目录中的所有图像转换为webp。然后将此代码添加到.htaccess文件中

RewriteEngine On

# redirect images to webp when possible
# check if browser accepts webp
RewriteCond %{HTTP_ACCEPT} image/webp

# check if requested file is jpg or png
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$

# check if a webp file exists for this image
RewriteCond %{REQUEST_FILENAME}\.webp -f

# serve webp image instead
RewriteRule . %{REQUEST_FILENAME}\.webp [T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

# make sure that browsers which do not support webp also get the Vary:Accept header
# when requesting images that would be redirected to existing webp on browsers that does.
SetEnvIf Request_URI "\.(jpe?g|png)$" ADDVARY

# Apache appends "REDIRECT_" in front of the environment variables defined in mod_rewrite, but LiteSpeed does not.
# So, the next lines are for Apache, in order to set environment variables without "REDIRECT_"
SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
SetEnvIf REDIRECT_ADDVARY 1 ADDVARY=1

# Set Vary:Accept header for the image types handled by WebP Express.
# The purpose is to make proxies and CDNs aware that the response varies with the Accept header.
Header append "Vary" "Accept" env=ADDVARY