前言
在大多數的web頁面中，圖片占到了頁面大小的60%-70% 。因此在web開發中 ， 不同的場景使用合適的圖片格式對web頁面的性能和體驗是很重要的 。圖片格式種類非常多，本文僅針對幾種web應用中常用的圖片格式：gif、png、jpg、webp進行一個基本的總結 。
圖片格式分類
- 無壓縮 。無壓縮的圖片格式不對圖片數據進行壓縮處理，能準確地呈現原圖片 。BMP格式就是其中之一 。
- 無損壓縮 。壓縮算法對圖片的所有的數據進行編碼壓縮，能在保證圖片的質量的同時降低圖片的尺寸 。png是其中的代表 。
- 有損壓縮 。壓縮算法不會對圖片所有的數據進行編碼壓縮，而是在壓縮的時候，去除了人眼無法識別的圖片細節 。因此有損壓縮可以在同等圖片質量的情況下大幅降低圖片的尺寸 。其中的代表是jpg 。
采用LZW壓縮算法進行編碼，是一種無損的基于索引色的圖片格式 。由于采用了無損壓縮，相比古老的bmp格式 ， 尺寸較小，而且支持透明和動畫 。缺點是由于gif只存儲8位索引（也就是最多能表達2^8=256種顏色），色彩復雜、細節豐富的圖片不適合保存為gif格式 。色彩簡單的logo、icon、線框圖適合采用gif格式 。
jpg
【gif、png、webp 聊一聊幾種常用web圖片什么是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關于圖片格式的選擇指南：
![2021皇室戰爭三倍圣水卡組搭配攻略 三倍圣水挑戰最強卡組搭配推薦[多圖]](http://img1.jingyanla.com/220422/0545041M9-0-lp.jpg)
