Gif,png,jpg,webp幾種圖片格式整理

GIF 意爲Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif。如今全部的圖形瀏覽器都支持GIF格式，並且有的圖形瀏覽器只熟悉GIF格式。GIF是一種索引顏色格式，在顏色數不多的狀況下，產生的文件極小，它的優勢主要有：

1.GIF格式支持背景透明。GIF圖片假如背景色設置爲透明，它將與瀏覽器背景相結合，生成非矩形的圖片。 
2.GIF格式支持動畫。在Flash動畫出現以前，GIF動畫能夠說是網頁中惟一的動畫形式。GIF格式能夠將單幀的圖象組合起來，而後輪流播放每一幀而成爲動畫。雖然並非全部的圖形瀏覽器都支持GIF動畫，可是最新的圖形瀏覽器都已經支持GIF動畫。 
3.GIF格式支持圖形漸進。漸進是指圖片漸漸顯示在屏幕上，漸進圖片將比非漸進圖片更快地出如今屏幕上，可讓訪問者更快地知道圖片的概貌。 
4.GIF格式支持無損壓縮。無損壓縮是不損失圖片細節而壓縮圖片的有效方法，因爲GIF格式採用無損壓縮，因此它更適合於線條、圖標和圖紙。 

5.水平掃描
Gif是使用了一種叫做LZW的算法進行壓縮的，當壓縮gif的過程當中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
GIF格式的缺點一樣至關明顯。索引顏色是歷史遺留的產物，在DOS下的老遊戲幾乎無一例外的採用索引顏色，這種格式原本早就應該淘汰了。可是因爲帶寬的限制，GIF從DOS時代紅到了Internet時代。GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對於照片質量的圖片是顯然不夠的。

JPEG 表明Joint Photograhic Experts Group（聯合圖像專家組），這種格式常常寫成JPG，JPG圖片的擴展名爲jpg。

JPG最主要的優勢是能支持上百萬種顏色，從而能夠用來表現照片。此外，因爲JPG圖片使用更有效的有損壓縮算法，從而使文件長度更小，下載時間更短。有損壓縮會放棄圖像中的某些細節，以減小文件長度。它的壓縮比至關高，使用專門的JPG壓縮工具其壓縮比可達180：1，並且圖像質量從瀏覽角度來說質量受損不會太大，這樣就大大方便了網絡傳輸和磁盤交換文件。JPG較GIF更適合於照片，由於在照片中損失一些細節不像對藝術線條那麼明顯。另外，JPG對照片的壓縮比例更大，而最後的質量也更好。

可是從長遠來看，JPG隨着帶寬的不斷提升和存儲介質的發展，它也應該是一種被淘汰的圖片格式，由於有損壓縮對圖像會產生不可恢復的損失。因此通過壓縮的JPG的圖片通常不適合打印，在備份重要圖片時也最好不要使用JPG。還有，JPG也不如GIF圖像那麼靈活，它不支持圖形漸進、背景透明，更不支持動畫。

PNG 是20世紀90年代中期開始開發的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式，同時增長一些GIF文件格式所不具有的特性。流式網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源於非官方的「PNG's Not GIF」，是一種位圖文件(bitmap file)存儲格式，讀成「ping」。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，而且還可存儲多到16位的α通道數據。PNG使用從LZ77派生的無損數據壓縮算法。

 

PNG意爲可移植網絡圖形格式(Portable Network Graphic Format)

透明性
Png是徹底支持alpha透明的(透明，半透明，不透明)，儘管有兩個怪異的現象在ie6(下面詳細討論)
動畫
它不支持動畫
無損耗性
png是一種無損耗的圖像格式，這也意味着你能夠對png圖片作任何操做也不會使  得圖像質量產生損耗。這也使得png能夠做爲jpeg編輯的過渡格式
水平掃描
像GIF同樣，png也是水平掃描的，這樣意味着水平重複顏色比垂直重複顏色的圖片更小
間隔漸進顯示
它支持間隔漸進顯示，可是會形成圖片大小變得更大

第一種PNG叫PNG8(布爾透明),簡單說能夠理解爲靜態的GIF
他們都只有256色,也支持索引透明,就是指定一個像素點是否是透明

第二種PNG也叫PNG8(Alpha透明)可指定像素點的透明度,例如50%透明度
這種優勢在於比PNG24/32體積小,但效果同樣
缺點在於IE6支持很差,會把半透明的像素點顯示成全透明

第三種PNG叫PNG24

PNG24不透明,可是顏色數不少,不止256色
而Photoshop裏導出的png24實際上是png32

第四種PNG叫PNG32
和photoshop的PSD同樣,是Fireworks的默認源文件格式,包含圖層和通道信息
和PNG24的區別在於多了透明信息
缺點在於IE6支持很差,會把透明區域顯示成藍灰底色 : 只能經過影響性能的方法AlphaImageLoader與須要加特殊標籤（VML）。

 

PNG文件格式保留GIF文件格式的下列特性：

使用彩色查找表或者叫作調色板可支持256種顏色的彩色圖像。 
流式讀/寫性能(streamability)：圖像文件格式答應連續讀出和寫入圖像數據 
這個特性很適合於在通訊過程當中生成和顯示圖像。 
逐次逼近顯示(progressive display)：這種特性可以使在通訊鏈路上傳輸圖像文件的同時就在終端上顯示圖像，把整個輪廓顯示出來以後逐步顯示圖像的細節，也就是先用低分辨率顯示圖像，而後逐步提升它的分辨率。 
透明性(transparency)：這個性能可以使圖像中某些部分不顯示出來，用來建立一些有特點的圖像。 
輔助信息(ancillary information)：這個特性可用來在圖像文件中存儲一些文本註釋信息。
獨立於計算機軟硬件環境。 
使用無損壓縮。 
PNG文件格式中要增長下列GIF文件格式所沒有的特性：

每一個像素爲48位的真彩色圖像。 
每一個像素爲16位的灰度圖像。 
可爲灰度圖和真彩色圖添加α通道。 
添加圖像的γ信息。 
使用循環冗餘碼(cyclic redundancy code，CRC)檢測損害的文件。 
加快圖像顯示的逐次逼近顯示方式。 
標準的讀/寫工具包。 
可在一個文件中存儲多幅圖像。 
文件結構 
這三種格式各有優缺點，其中PNG優勢多多。雖然普及得還很通常，可是其非凡的優越性已經讓咱們對其產生很是大的愛好。至少我如今很喜歡這種格式。固然了對於製做頁面的製做人員來講，頁面整體積的大小那就是競爭力。因此咱們仍是必須要注重這三種格式的混合使用。那以何時用GIF何時用PNG 何時用JPG呢？咱們下面一一來分析。

在實際的工做中，我發現通常的純色的圖形，好比一些小圖標、平鋪背景其中的色彩比較少，那麼做爲GIF格式雖然只有256種色彩，可是應對這種類型的圖片那必定是很是的合適的。固然了，不排除有一些非凡的小圖標色彩的豐富性，可是相信做爲小圖標其色彩有點損失也不會影響到總體的視覺效果，因此GIF 的適用範圍是：小圖標、平鋪背景等色彩比較少的小型圖片。

那麼大圖片又怎麼選擇呢，首先咱們先了解一下JPG，咱們使用Photoshop的朋友都知道，在最後導出圖片時會有一個地方讓咱們選擇這個JPG 圖片的圖片品質，100%是表示無壓縮，當咱們拿同一張圖片導出不一樣的品質圖片對比時咱們發現品質低的很明顯會比品質高的髒了不少，這樣照片看起來就很很差，固然咱們也發現這種狀況在偏大色塊的圖片中猶爲突出。因此好比天空、人像。非凡人像面部就會出現很難看的黑斑。固然假如對於照片質量要求不嚴格可使用JPG而且下降品質。可是不適用於背景、小圖標。

Webp格式：Google開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。固然其也是一種有損壓縮，其主要目的就是加快網絡圖片的傳輸效率，讓圖片能更快的顯示在用戶的眼前。目前所知道的只有高版本的W3C瀏覽器才支持這種格式，好比chorme39+，safari7+等等。