在我的页面上使用Webp图像,但是Google Pagespeed洞察力仍然显示出这种机会“以下一代格式提供图像”。
此问题仅在css背景属性中包含的图像中发生。
我已将所有jpg / png图像都转换为webp,并在此博客https://www.freecodecamp.org/news/make-your-website-load-lightning-fast-with-webp-images-cf55c98ac0a2/的帮助下插入了我的页面,浏览器也显示了webp格式的图像,一切正常,但Google pagespeed测试仍在显示机会。
.banner {
width: 100%;
position: relative;
height:400px;
}
.no-webp .banner, .no-js .banner {
background: #7d7e82 url(images/banner.png) no-repeat;
background-size: cover;
}
.webp .banner {
background: #7d7e82 url(images/banner.webp) no-repeat;
background-size: cover;
}
<div class="banner">
<div class="container">
</div>
</div>
{{1}}
以下一代格式投放图像 1.16 s
JPEG 2000,JPEG XR和WebP之类的图像格式通常比PNG或JPEG提供更好的压缩,这意味着下载速度更快且数据消耗更少。