目的:优化网站,减少图片加载速度,提升用户体验。
WebP 是由谷歌(google)开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带资源和数据空间,在压缩率上比 JPEG 格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。
缺点:还没有在各个主流浏览器上兼容。
所以目前safari这个鬼也还没有支持他,这是个硬伤,我们来想想办法。
我们来在.htaccess文件做做手脚,,,,,
将支持webp格式的浏览器,如果有此webp格式的图片则返回webp的图片,如果没有则显示原图片;
将不支持webp格式的浏览器,直接显示原图片。
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,现在已经大功告成啦,去喝杯茶,哈哈哈……
仅供学习使用,哪里有不对的或者不明白的可留言,一起来探讨。
注:转载请注明出处。