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

目的：优化网站，减少图片加载速度，提升用户体验，提高性能。

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)$ 

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Check if browser supports WebP images
    RewriteCond %{HTTP_ACCEPT} image/webp

    # Check if WebP replacement image exists
    RewriteCond %{REQUEST_FILENAME}.webp -f

    # Serve WebP image instead
    RewriteRule (.+).(jpe?g|png|gif)$ %    {REQUEST_FILENAME}.webp [T=image/webp,E=REQUEST_image]
    <IfModule mod_setenvif.c>
        SetEnvIf Request_URI ".(jpe?g|png|gif)$" _image_request
    </IfModule>
    <IfModule mod_headers.c>
        Header append Vary Accept env=REQUEST_image
    </IfModule>
    <IfModule mod_mime.c>
        AddType image/webp .webp
    </IfModule>
</IfModule>

OK，现在已经大功告成啦，去喝杯茶，哈哈哈……

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