對於不支持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，現在已經大功告成啦，去喝杯茶，哈哈哈……

僅供學習使用，哪里有不對的或者不明白的可留言，一起來探討。
注：轉載請注明出處。