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图像绝对是提高页面加载速度的考虑因素，但是并非所有浏览器都支持新格式（例如Internet Explorer不支持新格式）。另外，您建议的实现使html复杂很多。

解决问题的一种优雅方法是为支持它的浏览器动态提供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

Webp实施

1 个答案: