對於不支援webp圖片格式的瀏覽器（IE、safari等）的解決辦法
阿新 • • 發佈：2020-07-23
目的：優化網站，減少圖片載入速度，提升使用者體驗。
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 .webp20 </IfModule> 21 </IfModule>
OK，現在已經大功告成啦，去喝杯茶，哈哈哈……
僅供學習使用，哪裡有不對的或者不明白的可留言，一起來探討。
注：轉載請註明出處。