圖片格式中的小較真

關(guān)于圖片格式，大家或多或少都能說出一兩種來，平時寫代碼的時候也不時會用到不同格式的圖片。但是我們在具體使用過程中，為了達到最佳的用戶體驗，我們需要根據(jù)不同的環(huán)境來選擇不同格式的圖片。這篇文章將為大家介紹一下常見的圖片格式的特點。

矢量圖與位圖

首先，我們先來說一說矢量圖和位圖。所有的圖片都可以劃分到這種類別中的一個去。

我們平時畫圖的時候可以通過點線面這些幾何特征明顯的要素畫圖，像這樣的。

也可以用許多點來構(gòu)成圖畫，類似這樣。

而同樣，我們的電腦在顯示圖片的時候也可以分為兩種——矢量圖和位圖。

矢量圖是通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息通過計算的方式來顯示圖形的。就好比我們在幾何學(xué)里面描述一個圓可以通過它的圓心位置和半徑來描述，當(dāng)然還可以通過邊框的粗細、顏色以及填充的顏色等數(shù)據(jù)去描述它的樣式。而電腦在顯示的時候則通過這些數(shù)據(jù)去繪制出我們定義的圖像。

矢量圖的優(yōu)點在于文件相對較小，并且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現(xiàn)自然度高的寫實圖像。

位圖又叫像素圖或柵格圖，它是通過記錄圖像中每一個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個拼塊都是一個純色的像素點，當(dāng)我們把這些不同顏色的像素點按照一定規(guī)律排列在一起的時候，就形成了我們所看到的圖像。所以當(dāng)我們放大一幅像素圖時，能看到這些拼片一樣的像素點（如下圖）。

位圖的優(yōu)點是利于顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會盡管我們在web頁面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是通過記錄像素點的數(shù)據(jù)來保存和顯示圖像，但這些不同格式的圖像在記錄這些數(shù)據(jù)時的方式卻不一樣，這就是涉及到有損壓縮和無損壓縮的區(qū)別——是否失真。

我們在web頁面上所使用的圖像都是位圖，即便有些稱為矢量圖形（如矢量icon等）也是指通過矢量工具進行繪制然后再轉(zhuǎn)成位圖格式在web上使用的（區(qū)別于像素繪制的圖形）。

有損壓縮和無損壓縮

接著，我們聊聊有損壓縮和無損壓縮。

有損壓縮，在臺灣、港澳又稱作破壞性資料壓縮，

有損數(shù)據(jù)壓縮方法是經(jīng)過壓縮、解壓的數(shù)據(jù)與原始數(shù)據(jù)不同但是非常接近的壓縮方法。有損數(shù)據(jù)壓縮又稱破壞型壓縮，即將次要的信息數(shù)據(jù)壓縮掉，犧牲一些質(zhì)量來減少數(shù)據(jù)量，使壓縮比提高。通俗點說，有損壓縮就是在存儲圖像的時候并不完全真實的記錄圖像上每個像素點的數(shù)據(jù)信息，它會根據(jù)人眼觀察現(xiàn)實世界的特性（人眼對光線的敏感度比對顏色的敏感度要高，生物實驗證明當(dāng)顏色缺失時人腦會利用與附近最接近的顏色來自動填補缺失的顏色）對圖像數(shù)據(jù)進行處理，去掉那些圖像上會被人眼忽略的細節(jié)，然后使用附近的顏色通過漸變或其他形式進行填充。這樣既能大大降低圖像信息的數(shù)據(jù)量，又不會對圖像的還原效果有較大影響。

相對有損壓縮而言，無損壓縮則會真實的記錄圖像上每個像素點的數(shù)據(jù)信息，但為了壓縮圖像文件的大小會采取一些特殊的算法。無損壓縮的壓縮原理是先判斷圖像上哪些區(qū)域的顏色是相同的，哪些是不同的，然后把這些相同的數(shù)據(jù)信息進行壓縮記錄，（例如一片藍色的天空之需要記錄起點和終點的位置就可以了），而把不同的數(shù)據(jù)另外保存（例如天空上的白云和漸變等數(shù)據(jù)）。就像下圖所示的一樣，壓縮軟件將每一種顏色進行編號，然后對像素點的顏色進行歸類，記錄下哪種顏色出現(xiàn)在哪個像素點上，這樣既壓縮了存儲空間，在還原圖片時也不會影響圖片質(zhì)量。

Jpg（JPEG），GIF和png三種圖片格式

我們平時接觸和使用得最多的就是JPG、GIF和PNG這三種格式了。

JPG（JPEG）

聯(lián)合照片專家組（外語簡稱JPEG外語全稱：Joint Photographic ExpertGroup）JPEG也是最常見的一種圖像格式，它是由聯(lián)合照片專家組（外語全稱：Joint Photographic Experts Group），文件后輟名為"．jpg"或"．jpeg"，是最常用的圖像文件格式。

JPG（JPEG）是我們最常見的采用有損壓縮對圖像信息進行處理的圖片格式。JPG在存儲圖像時會把圖像分解成8*8像素的柵格（如下圖），然后對每個柵格的數(shù)據(jù)進行壓縮處理，當(dāng)我們放大一幅圖像的時候，就會發(fā)現(xiàn)這些8*8像素柵格中很多細節(jié)信息被去除，而通過一些特殊算法用附近的顏色進行填充（為了讓大家看得更清楚我將圖像的壓縮比率調(diào)到很低）。這也是為什么我們用JPG存儲圖像有時會產(chǎn)生塊狀模糊的原因。

JPG（JPEG）格式的優(yōu)缺點：

優(yōu)點：

攝影作品或?qū)憣嵶髌分С指呒墘嚎s。

利用可變的壓縮比可以控制文件大小。

支持交錯（對于漸近式JPG（JPEG）文件）。

JPG（JPEG） 廣泛支持 Internet 標準。

缺點：

有損耗壓縮會使原始圖片數(shù)據(jù)質(zhì)量下降。

當(dāng)我們編輯和重新保存JPG（JPEG）文件時，JPG（JPEG）會混合原始圖片數(shù)據(jù)的質(zhì)量下降。這種下降是累積性的。

JPG（JPEG） 不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡單的圖片。

GIF

圖形交換格式（外語簡稱：GIF、外語全稱：Graphics Interchange Format），是CompuServe公司在 1987年開發(fā)的圖像文件格式。GIF格式，是為使圖片能夠應(yīng)用在在線應(yīng)用程序上所特別開發(fā)的圖片格式。Gif，有時也被稱為為“Giff”，是一種無損，8位圖片格式。“無損”是指100%的保持原始圖片的像素數(shù)據(jù)信息。“8位”是指，所能表現(xiàn)的顏色深度——一個8位圖像僅最多只能支持256種不同顏色（一個多余256種顏色的圖片若用gif圖片保存會出現(xiàn)失真）。

GIF格式有四大特性

透明特性：
GIF支持基本的透明特性，這意味著你能夠使圖片的某些像素“不可見”。在其被放置到網(wǎng)頁中時，我們就可以看到通過這些不可見區(qū)域看到此圖片后面的背景顏色（圖片）。此特性非常有用：如果你需要將某個gif圖片的內(nèi)容置于所有圖片的上層，你可以將其設(shè)置為透明。
壓縮特性：
GIF格式采用LZW算法進行壓縮，此算法是Unisys申請的一項專利。在很久很久之前，如果你想使用GIF格式，那么就意味著你需要向Unisys付費申請專利許可。不過值得高興的是，此項專利技術(shù)已于2003年6月20日過期，我們現(xiàn)在使用GIF是完全免費的。
快速加載：
GIF同時也支持隔行掃描。隔行掃描能夠令圖片在瀏覽器中更快的加載和顯示。此特性對于那些慢網(wǎng)速的瀏覽者來說尤其實用。
動畫GIF：
一個動態(tài)的GIF文件，是由若干幀圖片所聯(lián)結(jié)而成的動態(tài)圖片。在顯示時，這些動態(tài)幀被反復(fù)的繪制讀取出來從而形成了簡單的動畫效果。

PNG

前面說過，以前使用GIF格式是要收錢的，那不想給錢怎么辦？于是用來代替GIF格式的便攜式網(wǎng)絡(luò)圖形（外語簡稱PNG、外語全稱：Portable Network Graphics）就應(yīng)運而生了。PNG格式，初始時被作為GIF的免費替代格式所開發(fā)，采用公共專利壓縮算法。PNG目前有PNG8和PNG24兩種格式，不過PNG最多可以支持48位通道。PNG8最多只能索引256種顏色，所以對于顏色較多的圖像不能真實還原；PNG24則可以保存1600多萬種顏色，基本能夠真實還原我們?nèi)祟惾庋鬯梢苑謩e的所有顏色.。

1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。

2、PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩×××像時，彩×××像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。

3、對于需要高保真的較復(fù)雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁面上。

JPG、PNG、GIF使用對比

這里只是介紹了一些常見的圖片格式的情況，在維基百科里有詳細的圖片格式的介紹，有興趣可以去看看。

https://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F%E6%AF%94%E8%BE%83

如果大家還想繼續(xù)深入地了解一下圖片格式的一些具體的算法實現(xiàn)，可以去看看

《bmp/gif/jpg圖象最底層原理分析》

http://www.cnblogs.com/glaivelee/archive/2011/10/10/2205151.html