圖片格式 jpg、png、gif各有什麼優缺點？什麼情況下用什麼格式的圖片呢？

01-01

簡單粗暴地說，小圖標，用png儲存最好。

png可以儲存透明，完爆gif的地方在於失真小，沒鋸齒；劣勢是不支持動畫；
png採用無損壓縮，在多數情況下都可以保留圖片里所有像素。PNG無損壓縮演算法，簡單地說，就是把圖片里出現的每一個顏色都記錄下來。通過記錄這些顏色相對應的值記錄一張圖片。
png分為兩種，一種是Index，一種是RGB。Index記錄同一種顏色的值和出現的位置（簡單地說，比如一個2px*2px的超級小圖，從左往右從上往下依次的顏色是紅，白，白，紅，那麼記錄的方法就是「紅-1,4；白-2,3」）；而RGB圖則把所有像素的色值依次記錄下來（即「紅，白，白紅」）。對於相同的圖片，Index格式的尺寸總是小於RGB。

但除非圖片尺寸，顏色層次豐富，這時候可能會失真，因為無論PNG8還是PNG24，儲存的索引色的數量都是有限的（PNG8最多儲存256個索引色，PNG24可以儲存1600多萬個，但相應的尺寸也會更大。）這時候，反而用jpg會好一些。你問題中說的是小圖標，那麼就png是恰當的。

jpg適用於攝影圖片，以及色彩豐富的圖片。它採用壓縮演算法，會對圖片上每8px*8px的像素進行處理，通過強制漸變的方法來減小文件尺寸，因此無論選擇的儲存質量多高，還是會多多少少失真一些，但對於攝影之類的圖片來說，jpg格式就會比png小很多了。

本文介紹和比較幾種常見圖片文件格式的優缺點，並介紹不同的文件格式對Web應用程序性能的影響。

有損vs無損

圖片文件格式有可能會對圖片的文件大小進行不同程度的壓縮，圖片的壓縮分為有損壓縮和無損壓縮兩種。

有損壓縮。指在壓縮文件大小的過程中，損失了一部分圖片的信息，也即降低了圖片的質量，並且這種損失是不可逆的，我們不可能從有一個有損壓縮過的圖片中恢復出全來的圖片。常見的有損壓縮手段，是按照一定的演算法將臨近的像素點進行合併。
無損壓縮。只在壓縮文件大小的過程中，圖片的質量沒有任何損耗。我們任何時候都可以從無損壓縮過的圖片中恢復出原來的信息。

索引色vs直接色

計算機在表示顏色的時候，有兩種形式，一種稱作索引顏色(Index Color)，一種稱作直接顏色(Direct Color)。

索引色。用一個數字來代表（索引）一種顏色，在存儲圖片的時候，存儲一個數字的組合，同時存儲數字到圖片顏色的映射。這種方式只能存儲有限種顏色，通常是256種顏色，對應到計算機系統中，使用一個位元組的數字來索引一種顏色。
直接色。使用四個數字來代表一種顏色，這四個數字分別代表這個顏色中紅色、綠色、藍色以及透明度。現在流行的顯示設備可以在這四個維度分別支持256種變化，所以直接色可以表示2的32次方種顏色。當然並非所有的直接色都支持這麼多種，為壓縮空間使用，有可能只有表達紅、綠、藍的三個數字，每個數字也可能不支持256種變化之多。

點陣圖vs矢量圖

點陣圖，也叫做點陣圖，像素圖。構成點陣圖的最小單位是象素，點陣圖就是由象素陣列的排列來實現其顯示效果的，每個象素有自己的顏色信息，在對點陣圖圖像進行編輯操作的時候，可操作的對象是每個象素，我們可以改變圖像的色相、飽和度、明度，從而改變圖像的顯示效果。點陣圖縮放會失真，用最近非常流行的沙畫來比喻最恰當不過，當你從遠處看的時候，畫面細膩多彩，但是當你靠的非常近的時候，你就能看到組成畫面的每粒沙子以及每個沙粒的顏色。
矢量圖，也叫做向量圖。矢量圖並不紀錄畫面上每一點的信息，而是紀錄了元素形狀及顏色的演算法，當你打開一付矢量圖的時候，軟體對圖形象對應的函數進行運算，將運算結果[圖形的形狀和顏色]顯示給你看。無論顯示畫面是大還是小，畫面上的對象對應的演算法是不變的，所以，即使對畫面進行倍數相當大的縮放，其顯示效果仍然相同(不失真)。

BMP

BitMap的縮寫，是無損的、既支持索引色也支持直接色的、點陣圖。

這是一種比較老的圖片格式。BMP是無損的，但同時這種圖片格式幾乎沒有對數據進行壓縮，所以BMP格式的圖片通常具有較大的文件大小。雖然同時支持索引色和直接色是一個優點，但是太大的文件格式格式導致它幾乎沒有用武之地，現在除了在Windows操作系統中還比較常見之外，我們幾乎看不到它。

從上圖中可以看到，在同樣的圖片質量下，BMP格式的圖片文件大小是GIF格式的很多倍。

GIF

全稱Graphics Interchange Format，採用LZW壓縮演算法進行編碼。是無損的、採用索引色的、點陣圖。

GIF是無損的，採用GIF格式保存圖片不會降低圖片質量。但得益於數據的壓縮，GIF格式的圖片，其文件大小要遠小於BMP格式的圖片。文件小，是GIF格式的優點，同時，GIF格式還具有支持動畫以及透明的優點。但，GIF格式僅支持8bit的索引色，即在整個圖片中，只能存在256種不同的顏色。

GIF格式適用於對色彩要求不高同時需要文件體積較小的場景，比如企業Logo、線框類的圖等。因其體積小的特點，現在GIF被廣泛的應用在各類網站中。

JPEG

JPEG是有損的、採用直接色的、點陣圖。

JPEG圖片格式的設計目標，是在不影響人類可分辨的圖片質量的前提下，儘可能的壓縮文件大小。這意味著JPEG去掉了一部分圖片的原始信息，也即是進行了有損壓縮。JPEG的圖片的優點，是採用了直接色，得益於更豐富的色彩，JPEG非常適合用來存儲照片，用來表達更生動的圖像效果，比如顏色漸變。

與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件較GIF更大。

PNG-8

PNG全稱Portable Network Graphics，PNG-8是PNG的索引色版本。PNG-8是無損的、使用索引色的、點陣圖。

PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應該儘可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8還支持透明度的調節，而GIF並不支持。現在，除非需要動畫的支持，否則我們沒有理由使用GIF而不是PNG-8。當然了，PNG-8本身也是支持動畫的，只是瀏覽器支持得不好，不像GIF那樣受到廣泛的支持。

可以看到PNG-8具有更好的透明度支持。

PNG-24

PNG-24是PNG的直接色版本。PNG-24是無損的、使用直接色的、點陣圖。

無損的、使用直接色的點陣圖，聽起來非常像BMP，是的，從顯示效果上來看，PNG-24跟BMP沒有不同。PNG-24的優點在於，它壓縮了圖片的數據，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。

雖然PNG-24的一個很大的目標，是替換JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而顯示效果則通常只能獲得一點點提升。所以，只有在你不在乎圖片的文件體積，而想要最好的顯示效果時，才應該使用PNG-24格式。

另外，PNG-24跟PNG-8一樣，是支持圖片透明度的。

SVG

全稱Scalable Vector Graphics，是無損的、矢量圖。

SVG跟上面這些圖片格式最大的不同，是SVG是矢量圖。這意味著SVG圖片由直線和曲線以及繪製它們的方法組成。當你放大一個SVG圖片的時候，你看到的還是線和曲線，而不會出現像素點。這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪製企業Logo、Icon等。

SVG是很多種矢量圖中的一種，它的特點是使用XML來描述圖片。藉助於前幾年XML技術的流行，SVG也流行了很多。使用XML的優點是，任何時候你都可以把它當做一個文本文件來對待，也就是說，你可以非常方便的修改SVG圖片，你所需要的只需要一個文本編輯器。

SVG並非只能繪製簡單的Logo類的圖片，它可以繪製出精緻的圖片的，比如下面這漲，嗯。

WebP

WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖。

從名字就可以看出來它是為Web而生的，什麼叫為Web而生呢？就是說相同質量的圖片，WebP具有更小的文件體積。現在網站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那麼將大大減少瀏覽器和伺服器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。

在無損壓縮的情況下，相同質量的WebP圖片，文件大小要比PNG小26%；
在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。

想像Web上的圖片之多，百分之幾十的提升，是非常非常大的優化。只可惜，目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，所以WebP的應用並不廣泛。為了使用更先進的技術，比如WebP圖片格式，來壓縮互聯網上傳輸的數據流量，谷歌甚至提供了Chrome Data Compression Proxy，設置了Chrome Data Compression Proxy作為Web代理之後，你訪問的所有網站中的圖片，在經過Proxy的時候，都會被轉換成WebP格式，以降低圖片文件的大小。

從個人博客粘過來，圖片都丟了。感興趣可以再看看我的博客：http://zhaox.github.io/multimedia/2016/01/13/introducing-image-types

reference

PNG vs. GIF vs. JPEG vs. SVG - When best to use?https://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD%A2https://developers.google.com/speed/webp/ High Performance Browser Networking by Ilya Grigorik

一張照片（點陣圖）不斷放大之後，會看到一個個小格子，這些小格子，叫像素

一個格子（像素），在計算機中，用二進位來表示

一個格子（像素），使用的二進位位數越多，像素的色彩就越豐富

舉例子，如果一個像素用一位二進位數表示，能有多少種顏色呢？

兩種，一個二進位位，要不放0（表示黑色），要不放1（表示白色）

因為JPG圖片使用24位二進位數來表示一個像素，所以能表示1600萬種顏色

肉眼能分辨的顏色大概是1千萬種，24位編碼一像素能反映肉眼真實的色彩，叫真彩色

GIF的圖片只保存了常用的256種顏色，並且按照索引0~255排序，叫索引色

所以JPEG圖片比GIF色彩更加豐富, 點開下面對比圖

jpg/jpeg:

優點:體積比png小,打開速度比png快

缺點:屬於有損壓縮，每次保存都會產生數據損失(jpeg artifacts), 故不適合用於多次編輯保存。壓縮率過高圖像會失真

PS:網路上最最常見的格式，也是靜態圖片(不只是照片)就常用的保存格式,就算是同一小組開發的jp2(相當於jpg第2代)也無法取代它。一般如果肉眼無法識別與png的差別和沒有特殊要求就用jpg.

png:

優點:無損壓縮，有透明選項，壓縮效率高於bmp

缺點:一般體積比同尺寸的90%壓縮率的jpg要大很多(通常是5倍以上),但人眼很難識別其中的區別

PS:最常見的無損壓縮圖片格式,如果是經常對某圖片進行編輯保存,要求圖片數據100%完整,或需要透明效果(給PS當素材或用作圖標等)則推薦使用

gif: 一般只作為動態圖像格式使用，正在被google的webm格式取代中

=。= 好吧感覺gif真沒啥可說的，要不是因為有動態效果誰會用這破玩意。。。

還有一點，jpg支持CMYK色彩模式，可以作為印刷輸出的文件格式。png和gif只支持RGB色彩模式，不能輸出印刷。

補充一點，PNG的透明屬性在萬惡的IE6中是不支持，但是可以用JS的手段去Hack。

小圖標，需要透明的用PNG。

照片，比較大的背景圖用JPG。

如果是純色或者只是簡單的沒有漸變之類的圖片，用GIF還是很不錯的，因為體積很小

JPG體積小，不能顯示透明像素，有質量損耗

PNG體積也很小但比JPG大，能顯示透明，理論上無損

我選擇PNG還是JPG主要是看圖片是否需要保存透明色，比如圓角矩形的APP圖標，四個圓角必須用透明色，就要選用PNG

Ps里有個保存是保存為Web格式，在裡面可以明顯看到各個格式各種質量下的同一個圖片的大小。

先附上一張通俗易懂的表格。

再闡述一個觀點，圖片格式的選擇考慮三點：

文件大小、
圖像的展現（這裡指圖片透明、動態圖片）
圖像質量。