前言
在大多數的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圖片的對比：
再看一下webp的相容性：
總結
結合以上的介紹，我們瞭解了各種圖片格式的優缺點及適用場景，我們再來通過一個圖表來做一個抽象總結：
| 格式 | 優點 | 缺點 | 適用場景 |
|---|---|---|---|
| gif | 檔案小，支援動畫、透明，無相容性問題 | 只支援256種顏色 | 色彩簡單的logo、icon、動圖 |
| jpg | 色彩豐富，檔案小 | 有失真壓縮，反覆儲存圖片質量下降明顯 | 色彩豐富的圖片/漸變影象 |
| png | 無失真壓縮，支援透明，簡單圖片尺寸小 | 不支援動畫，色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
| webp | 檔案小，支援有損和無失真壓縮，支援動畫、透明 | 瀏覽器相容性不好 | 支援webp格式的app和webview |
最後附上Google關於圖片格式的選擇指南：
