聊一聊幾種經常使用web圖片格式：gif、jpg、png、webp

前言

在大多數的web頁面中，圖片佔到了頁面大小的60%-70%。所以在web開發中，不一樣的場景使用合適的圖片格式對web頁面的性能和體驗是很重要的。圖片格式種類很是多，本文僅針對幾種web應用中經常使用的圖片格式：gif、png、jpg、webp進行一個基本的總結。

圖片格式分類

• 無壓縮。無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片。BMP格式就是其中之一。
• 無損壓縮。壓縮算法對圖片的全部的數據進行編碼壓縮，能在保證圖片的質量的同時下降圖片的尺寸。png是其中的表明。
• 有損壓縮。壓縮算法不會對圖片全部的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼沒法識別的圖片細節。所以有損壓縮能夠在同等圖片質量的狀況下大幅下降圖片的尺寸。其中的表明是jpg。

gif

採用LZW壓縮算法進行編碼，是一種無損的基於索引色的圖片格式。因爲採用了無損壓縮，相比古老的bmp格式，尺寸較小，並且支持透明和動畫。缺點是因爲gif只存儲8位索引（也就是最多能表達2^8=256種顏色），色彩複雜、細節豐富的圖片不適合保存爲gif格式。色彩簡單的logo、icon、線框圖適合採用gif格式。

jpg

jpg是一種有損的基於直接色的圖片格式。因爲採用直接色，jpg可以使用的顏色有1600w之多（2^24），而人眼識別的顏色數量大約只有1w多種，所以jpg很是適合色彩豐富圖片、漸變色。jpg有損壓縮移除肉眼沒法識別的圖片細節後，能夠將圖片的尺寸大幅度地減少。

可是jpg不適合icon、logo，由於相比gif/png-8，它在文件大小上絲毫沒有優點。

png-8

png-8採用無損壓縮，是基於8位索引色的位圖格式。png-8相比gif對透明的支持更好，同等質量下，尺寸也更小。很是適合做爲gif的替代品。但png-8也一個明顯的不足就是不支持動畫。這也是png-8沒辦法徹底替代gif的重要緣由。若是沒有動畫需求推薦使用png-8來替代gif。

png-24

png-24採用無損壓縮，是基於直接色的位圖格式。png-24的圖片質量堪比bmp，可是卻有bmp不具有的尺寸優點。固然相比於jpg，gif，png-8，尺寸上仍是要大。正是由於其高品質，無損壓縮，很是適合用於源文件或須要二次編輯的圖片格式的保存。

png-24與jpg同樣能表達豐富的圖片細節，但並不能替代jpg。圖片存儲爲png-24比存儲爲jpg，文件大小至少是jpg的5倍，但在圖片品質上的提高卻微乎其微。因此除非對品質的要求極高，不然色彩豐富的網絡圖片仍是推薦使用jpg。

png-24與png-8同樣也支持透明。

webp

WebP圖片是一種新的圖像格式，由Google開發。與png、jpg相比，相同的視覺體驗下，WebP圖像的尺寸縮小了大約30％。另外，WebP圖像格式還支持有損壓縮、無損壓縮、透明和動畫。理論上徹底能夠替代png、jpg、gif等圖片格式，固然目前webp的尚未獲得全面的支持。

看一下png圖片與webp圖片的對比：

詳見 png VS webp。

再看一下webp的兼容性：

能夠看到webp格式的支持度還不是很好，可是移動端的支持總體還能夠。

總結

結合以上的介紹，咱們瞭解了各類圖片格式的優缺點及適用場景，咱們再來經過一個圖表來作一個抽象總結：

格式	優勢	缺點	適用場景
gif	文件小，支持動畫、透明，無兼容性問題	只支持256種顏色	色彩簡單的logo、icon、動圖
jpg	色彩豐富，文件小	有損壓縮，反覆保存圖片質量降低明顯	色彩豐富的圖片/漸變圖像
png	無損壓縮，支持透明，簡單圖片尺寸小	不支持動畫，色彩豐富的圖片尺寸大	logo/icon/透明圖
webp	文件小，支持有損和無損壓縮，支持動畫、透明	瀏覽器兼容性很差	支持webp格式的app和webview

最後附上Google關於圖片格式的選擇指南：