目的：优化网站，减少图片加载速度，提升用户体验，提高性能。
WebP 是由谷歌（google）开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带资源和数据空间，在压缩率上比 JPEG 格式更优越，同时提供了有损压缩与无损压缩的图片文件格式，在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。
缺点：还没有在各个主流浏览器上兼容。
所以目前safari这个鬼也还没有支持他，这是个硬伤，我们来想想办法。
1.对于少量的或仅有几个图片的情况下，可以直接用
<picture></picture>
<picture>
<source srcset="img.webp" type="image/webp">
<img src="img.png">
</picture>
2.如果有大量页面需要更改，那么Apache的mod_rewrite模块可以帮助我们实现将.webp图像提供给支持的浏览器。
来。我们来在.htaccess文件做做手脚，，，，，
将支持webp格式的浏览器，如果有此webp格式的图片则返回webp的图片，如果没有则显示原图片；
将不支持webp格式的浏览器，直接显示原图片。
#RewriteCond %{REQUEST_URI} (?i)(.*)(.jpe?g|.png)$
1 <IfModule mod_rewrite.c> 2 RewriteEngine On 3 4 # Check if browser supports WebP images 5 RewriteCond %{HTTP_ACCEPT} image/webp 6 7 # Check if WebP replacement image exists 8 RewriteCond %{REQUEST_FILENAME}.webp -f 9 10 # Serve WebP image instead 11 RewriteRule (.+).(jpe?g|png|gif)$ % {REQUEST_FILENAME}.webp [T=image/webp,E=REQUEST_image] 12 <IfModule mod_setenvif.c> 13 SetEnvIf Request_URI ".(jpe?g|png|gif)$" _image_request 14 </IfModule> 15 <IfModule mod_headers.c> 16 Header append Vary Accept env=REQUEST_image 17 </IfModule> 18 <IfModule mod_mime.c> 19 AddType image/webp .webp 20 </IfModule> 21 </IfModule>
OK，现在已经大功告成啦，去喝杯茶，哈哈哈……
仅供学习使用，哪里有不对的或者不明白的可留言，一起来探讨。
注：转载请注明出处。