对于不支持webp图片格式的浏览器(IE、safari等)的解决办法

目的:优化网站,减少图片加载速度,提升用户体验。

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,现在已经大功告成啦,去喝杯茶,哈哈哈……

仅供学习使用,哪里有不对的或者不明白的可留言,一起来探讨。
注:转载请注明出处。

 

对于不支持webp图片格式的浏览器(IE、safari等)的解决办法

上一篇:JQuery 基础


下一篇:解决MVC提示未能加载文件或程序集“System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。