為什麼想整理這方面的類容，我覺得就像油畫家要了解他的顏料和畫布、雕塑家要了解他的石材一樣，作為網頁設計師也應該對圖片格式的特性有一定了解，這樣才能更好的表達你的創意和想法。

除此之外，我們在平時工作中也會遇到許多與圖片格式相關的問題。比如設計師會奇怪為什麼有些頁面的產出物總是沒法達到設計稿那樣的品質和效果，什麼樣的設計才更適合Web頁面；頁面重構師和前端工程師則想知道在切圖的時候應採用什麼圖片格式、如何進行引數設定才能達到品質和效能的最優化。

有時候我們可能會因為一張格式不正確的圖片而導致設計品質的下降以及頁面效能的降低。瞭解圖片格式的特性就是為解答這些困惑從而讓我們設計的產品更好、更快。

<a href="http://www.rankbill.com/wp-content/uploads/2013/10/2.jpg" class="cboxElement" rel="example4" 113"="" style="color: rgb(58, 151, 41); text-decoration: none; outline-width: 0px; outline-style: initial; outline-color: initial; ">

本文主要包括以下幾方面內容：

1、基本概念

要了解圖片格式的特性，首先得從一些基本概念開始。這部分內容讀起來可能會比較枯燥，但如果你耐著性子讀完它，相信會獲益匪淺。

向量圖與點陣圖

向量圖-完美的幾何圖形

向量圖是通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等資訊通過計算的方式來顯示圖形的。就好比我們在幾何學裡面描述一個圓可以通過它的圓心位置和半徑來描述，當然還可以通過邊框的粗細、顏色以及填充的顏色等資料去描述它的樣式。而電腦在顯示的時候則通過這些資料去繪製出我們定義的影象。

向量圖的優點在於檔案相對較小，並且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現自然度高的寫實影象。

需要強調說明的是我們在web頁面上所使用的影象都是點陣圖，即便有些稱為向量圖形（如向量icon等）也是指通過向量工具進行繪製然後再轉成點陣圖格式在web上使用的（區別於畫素繪製的圖形）。

點陣圖-神奇的拼圖

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

點陣圖的優點是利於顯示色彩層次豐富的寫實影象。缺點則是檔案大小較大，放大和縮小影象會失真。

儘管我們在web頁面中所使用的JPG、PNG、GIF格式的影象都是點陣圖，即他們都是通過記錄畫素點的資料來儲存和顯示影象，但這些不同格式的影象在記錄這些資料時的方式卻不一樣，這就是涉及到有失真壓縮和無失真壓縮的區別。

有失真壓縮與無失真壓縮

有失真壓縮-你看到的不一定是真實的

按照我的理解有失真壓縮就是在儲存影象的時候並不完全真實的記錄影象上每個畫素點的資料資訊，它會根據人眼觀察現實世界的特性（人眼對光線的敏感度比對顏色的敏感度要高，生物實驗證明當顏色缺失時人腦會利用與附近最接近的顏色來自動填補缺失的顏色）對影象資料進行處理，去掉那些影象上會被人眼忽略的細節，然後使用附近的顏色通過漸變或其他形式進行填充。這樣既能大大降低影象資訊的資料量，又不會影響影象的還原效果。

JPG是我們最常見的採用有失真壓縮對影象資訊進行處理的圖片格式。JPG在儲存影象時會把影象分解成8*8畫素的柵格（如上圖），然後對每個柵格的資料進行壓縮處理，當我們放大一幅影象的時候，就會發現這些8*8畫素柵格中很多細節資訊被去除，而通過一些特殊演算法用附近的顏色進行填充（為了讓大家看得更清楚我將影象的壓縮比率調到很低）。這也是為什麼我們用JPG儲存影象有時會產生塊狀模糊的原因。

無失真壓縮-最精確的拼圖

相對有失真壓縮而言無失真壓縮則會真實的記錄影象上每個畫素點的資料資訊，但為了壓縮影象檔案的大小會採取一些特殊的演算法。無失真壓縮的壓縮原理是先判斷影象上哪些區域的顏色是相同的，哪些是不同的，然後把這些相同的資料資訊進行壓縮記錄，（例如一片藍色的天空之需要記錄起點和終點的位置就可以了），而把不同的資料另外儲存（例如天空上的白雲和漸變等資料）。

PNG是我們最常見的一種採用無失真壓縮的圖片格式。無失真壓縮在儲存影象前會先判斷影象上哪些地方是相同的哪些地方是不同的，為此需要對影象上所有出現的顏色進行索引（如上圖），我們把稱這些顏色稱為索引色。索引色就好比繪製這幅影象的“調色版”，PNG在顯示影象的時候則會用“調色版”上的這些顏色去填充相應的位置。

這裡大家可能會疑惑既然PNG採用的是無失真壓縮為什麼我們儲存的PNG格式圖片還會有失真呢？這是因為無失真壓縮只是說它的壓縮方式會盡可能真實的還原影象，但從它的壓縮原理我們可以知道它是通過索引影象上相同區域的顏色進行壓縮和還原的，這就意味著只有在影象上出現的顏色數量小於我們可以儲存的顏色數量時，我們才能真實的記錄和還原影象，否則就會丟失一些影象資訊（PNG8最多隻能索引256種顏色，所以對於顏色較多的影象不能真實還原；PNG24則可以儲存1600多萬種顏色，基本能夠真實還原我們人類肉眼所可以分別的所有顏色；PNG格式最多可以儲存48位顏色通道）。而對於有失真壓縮來說，不管影象上的顏色多少，都會損失影象資訊。

JPG和PNG

關於JPG和PNG的基本資訊介紹這裡就不贅述了，有興趣詳細瞭解的同學可以去這裡：
什麼是JPG、什麼是PNG。另外這裡我們也不對GIF進行討論，是因為PNG就是為取代GIF而生的，而且PNG的壓縮演算法也要優於GIF，所以只要不是需要動畫效果的地方強烈建議都採用PNG格式圖片。

這裡我們不妨把JPG和PNG的一些特性進行一個簡單對比：

格式	壓縮模式	交錯支援	透明支援	動畫支援
JPG	有失真壓縮	支援	不支援	不支援
PNG	無失真壓縮	支援	支援	不支援

JPG的特性

1. 1、支援攝影影象或寫實影象的高階壓縮，並且可利用壓縮比例控制影象檔案大小。
2. 2、有失真壓縮會使影象資料質量下降，並且在編輯和重新儲存JPG格式影象時，這種下降損失會累積。
3. 3、JPG不適用於所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。

PNG的特性

1. 1、能在保證最不失真的情況下儘可能壓縮影象檔案的大小。
2. 2、PNG用來儲存灰度影象時，灰度影象的深度可多到16位，儲存彩色影象時，彩色影象的深度可多到48位，並且還可儲存多到16位的α通道資料。
3. 3、對於需要高保真的較複雜的影象，PNG雖然能無失真壓縮，但圖片檔案較大，不適合應用在Web頁面上。

PNG8與PNG24

提到PNG格式就不得不提到PNG8和PNG24，這種叫法並非官方定義，不過由於普遍使用已經被大家廣泛接受了。通過前面的介紹我們知道PNG採用無失真壓縮是通過索引色去儲存和還原影象的，PNG8和PNG24後面的數字則是代表這種PNG格式最多可以索引和儲存的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。

不僅如此，PNG8還支援1位的布林透明通道，所謂布林透明指的是要麼完全透明要麼完全不透明。而PNG24則支援8位（256階）的alpha通道透明，也就是說可以儲存從完全透明到完全不透明一共256個層級的透明度（即所謂的半透明）。

格式	最高支援色彩通道	索引色編輯支援	透明支援
PNG8	256色	支援	支援布林透明
PNG24	約1600萬色	不支援	支援8位（256階）alpha透明

可能通過以上特性的對比大家還不能很直觀的理解在實際應用中到底因該選擇什麼格式的圖片檔案，我們不妨結合上面的基本概念通過幾個例子去給大家說明。

2、實際應用

什麼時候應該使用PNG

示例1

下圖是淘寶網最常見的一個圖片即“立刻購買”按鈕，這裡我嘗試用JPG和PNG8格式分別進行儲存，可以看到儲存的結果有兩個值得注意的地方：

1. 1、JPG儲存的檔案大小是PNG儲存的檔案大小的2倍
2. 2、JPG不僅檔案更大並且還出現了噪點（如圖中紅色方框標註的）

那麼是什麼原因造成這樣的差異呢？

首先我們可以看出“立刻購買”這個按鈕是在photoshop中用向量工具繪製出來的，其漸變填充是非常規則的線性漸變，文字顏色和描邊等都是採用純色，所以這個影象所包含的色彩資訊非常有限。根據前面我們介紹的無失真壓縮的特性，當用PNG儲存這個影象時，只需要儲存很少的色彩資訊就可以真實還原這個影象。而對於JPG格式來說大小主要決定於影象的顏色層次，所以在這種顏色較少但對比強烈的情況下，反而不能很好的壓縮檔案大小。

另外根據有失真壓縮的壓縮演算法JPG會在影象中通過漸變或其他方式填充一些被刪除的資料資訊來對影象進行壓縮，圖中紅色和白色的地方由於色差較大，JPG在壓縮過程中就會填充一些額外雜色進去，反而影響的影象的質量。這也是為什麼JPG不利於儲存大塊顏色相近區域以及亮度差異十分明顯的影象的原因。

示例2

我們再來看另外一個應用場景，下圖是在淘寶彩票頁面使用的一個Banner影象。同樣用PNG8和JPG進行了儲存，可以發現當用PNG8儲存時不僅保證了影象的質量且影象檔案的大小僅有8.3K，而當用JPG 100%儲存時檔案大小則增加到44.2K，如果不經放大可能還看不出具體的差異，但實際和前面一樣也會出現不必要的噪點。如果我們要達到PNG8的壓縮率採用JPG 45%進行儲存，則影象會出現較嚴重的失真。

由此我們可以得出結論，具備以下條件的影象更適合用PNG8格式進行儲存：

1. 1、影象上顏色較少，並且主要以純色或者平滑的漸變色進行填充。
2. 2、具備較大亮度差異以及強烈對比的簡單影象（如“立刻購買”按鈕中的背景和文字）。

根據經驗具備上述條件的影象一般是使用photoshop或其他軟體中的向量工具進行繪製然後再儲存成點陣圖的影象。

什麼時候應該使用JPG

示例1

從JPG的特性介紹我們知道JPG更適合用來儲存攝影或寫實影象，所以我們不妨先拿一張攝影作品做嘗試。

下圖是一副巴士車的照片，我們嘗試用JPG 60%（左上）、PNG8 256色 無仿色（右上）、PNG8 256色 擴散仿色（左下）、PNG32（右下）分別進行了儲存。可以看出當用JPG儲存影象時不僅能夠達到最大的壓縮率，也能儘量保證原圖的還原效果。而採用PNG8進行儲存時影象檔案大小更大，失真也較嚴重。只有在PNG24的格式下才能保證品質，然而檔案大小卻比JPG要大很多。

產生這種結果的原因也與JPG和PNG各自的壓縮演算法有關。

對於攝影或者寫實作品，由於受環境光線的影響，影象上的色彩層次十分豐富。比如巴士車上的紅色區域由於反光、陰影以及透視效果會形成明暗、深淺各異的區域，如果用PNG去儲存，則需要不同明暗度的紅色去儲存這個區域。對於整張圖片來說，PNG8的256色無法完全索引影象上出現的所有顏色，於是在儲存時就會丟失許多顏色而產生失真。如果要保證影象的效果，則需要色彩範圍更廣的PNG24進行儲存，相應的檔案大小也會增加。

而JPG的壓縮演算法則更利於對真實世界中這些複雜的色彩變化進行壓縮處理，從而在儘量壓縮檔案大小的情況下比較好的還原影象的視覺效果。

示例2

那麼是不是隻有在儲存照片的時候才需要用到JPG呢？我們不妨來看另外一個例子。

下圖是最近比較火爆的某微博頁面，在這裡我們可以選擇不同的風格，每種風格都會有一個非常有特色的背景圖片。我們嘗試用不同圖片格式對背景進行儲存時可以發現：當用JPG進行儲存時（直接背景另存為）檔案大小僅36.3K；而用PNG8 256色無仿色去儲存時大小增加到57.7K，不僅如此由於顏色的缺失在影象上還出現了一些帶鋸齒的色塊；為了降低這些色塊對影象質量的影響我們對PNG8增加了擴散仿色的效果，此時檔案大小達到了156.3K；而當採用PNG24完全不失真的儲存時檔案大小是231.9K。

儘管這幅背景圖也是通過photoshop製作，但我們可以發現由於在影象上採用了很多的真實素材（比如白雲、螞蟻、綠葉等），而這些真實素材和攝影影象一樣也會存在非常豐富的色彩層次，所以也不適合用PNG格式進行儲存。這個時候我們就應該採用JPG格式。

由此我們可以得出結論：對於寫實的攝影影象或是顏色層次非常豐富的影象採用JPG的圖片格式儲存一般能達到最佳的壓縮效果。

根據經驗我們在頁面中使用的商品圖片、採用人像或者實物素材製作的廣告Banner等影象更適合採用JPG的圖片格式儲存。

總結

由此可見在儲存影象時採用JPG還是PNG主要依據影象上的色彩層次和顏色數量進行選擇。一般層次豐富顏色較多的影象採用JPG儲存，而顏色簡單對比強烈的則需要採用PNG。但也會有一些特殊情況，例如有些影象儘管色彩層次豐富，但由於圖片尺寸較小，上面包含的顏色數量有限時，也可以嘗試用PNG進行儲存。而有些向量工具繪製的影象由於採用較多的濾鏡特效也會形成豐富的色彩層次，這個時候就需要採用JPG進行儲存了。

另外還有一個原則就是用於頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該儘量用PNG格式進行儲存，這樣才能更好的保證設計品質。而其他一些內容元素，如廣告Banner、商品圖片等對質量要求不是特別苛刻的，則可以用JPG去進行儲存從而降低檔案大小。

3、思考與實踐

什麼樣的設計更適合web頁面？

慎用較“重”的視覺設計元素

Web2.0時代網頁設計的一大趨勢就是越來越“輕”。除了對那些高光和圓角效果的審美疲勞之外，設計師們也開始意識到好的設計應該是內容與形式的完美結合，而非形式的堆砌。所以設計師在應用那些較“重”的視覺效果時，一定要想清楚這樣做的目的和意義，以及是否與產品的特點和受眾的氣質相契合。

“輕量“設計一個比較典型的例子就是國內某知名網站，幾乎沒有採用任何需要圖片的視覺元素，而是通過簡單的CSS樣式去實現，這樣不僅能夠突出內容，更能提升頁面的訪問速度。所以我十分強烈的建議視覺設計師也掌握一定的html和css知識（尤其是CSS3實現了很多過去需要圖片才能實現的效果，例如圓角和漸變），這樣在做設計的時候能夠全面的去考慮產品效果。

下面這個電子商務網站則採用過多無意義的視覺元素堆砌，不僅沒有實現很好的設計效果，反而由於需要太多的圖片元素而影響了頁面的效能。

如果由於產品需要在設計中不得不使用較”重“的視覺元素，我們也可以根據圖片格式的特點選擇適當的表現形式以達到更好的效果。

例如在下面這個例子中，第一個Banner應用了更適合PNG格式的設計風格（較多純色和簡單漸變的應用）不僅能達到熱烈、突出的視覺效果，在保證圖片質量的同時也更好的壓縮了檔案大小；而第二個Banner由於應用了過於複雜的漸變色和強烈對比，並且在區域性區域採用太多的高光和陰影效果，導致圖片的色彩層次過多，不論採用PNG還是JPG格式儲存都無法實現影象質量和檔案大小的最優化。

當然舉這個例子並不是要設計師在做設計的時候過分考慮頁面效能問題，而是要清楚不同設計形式的效果和實現成本，在設計過程中多問自己為什麼要這樣做？

內容和形式的分離

對於一些比較強調視覺效果的特殊產品，比如活動推廣頁面或Mini Site。我們也可以利用圖片格式和一些前端知識對設計進行優化，比較常用的一種設計方法就是內容和形式的分離。

如下面一些國外比較流行的設計風格，以及前面提到的微博網站，都是通過大幅的背景圖去進行意境的傳達和氣氛的渲染。這樣做的一個好處就是能把需要用到圖片的視覺元素進行集中的壓縮優化，同時又不會由於載入太慢而影響使用者的訪問速度（前端實現時一般會用相近的背景色先進行填充，然後在逐步顯示背景圖）。

個人認為好的視覺設計最重要是意境傳達和氣氛渲染，使用高光、陰影等濾鏡效果的目的也僅僅是為了達到質感上的統一從而更好的去傳達意境和渲染氣氛，所以切忌為了質感而質感。即便是為了體現設計品質也不一定非要使用炫麗的濾鏡，相較而言優美的佈局和精巧的結構才是體現品質的關鍵！

通過較小的視覺犧牲換取較大的效能提升

有時候為了提升頁面的載入速度達到更好的使用者體驗，不得不對設計進行優化。這個時候利用我們對圖片格式知識掌握就可以更有目的性的去進行優化。

例如下圖是淘寶“雙十一”大促活動的一個頁頭設計，由於頁面訪問量非常大並且要使用較多的商品圖片，不得不對頁頭設計進行優化以提升效能。這個時候我們就可以去掉一些不太重要的高光、漸變和陰影效果，從而大大降低檔案大小。

我們還可以做些什麼？

Sprite圖片二次優化

由於目前國內很多網際網路公司沒有頁面重構師這一職位，所以頁面切圖和靜態程式碼實現基本都是前端工程師去完成。為提高頁面效能目前普遍採用的實現方式是將與頁面結構相關的需要用到圖片的視覺元素集中在一個PNG圖片上，然後通過CSS樣式將其應用到頁面中，我們稱這個圖片為Sprite圖片。由於這個圖片上經常要集中較多的視覺元素，在用PNG格式儲存時難免會產生失真而影響圖片質量。這個時候就需要視覺設計師幫助前端開發工程師對Sprite圖片進行優化，這樣做的好處是不僅能提升圖片質量，還能達到減小檔案大小的效果，可謂一舉兩得。

下圖是一個優化前的Sprite圖片，由於視覺元素過多PNG8無法真實儲存所有的顏色資訊，於是便會產生顏色的缺失和雜色的產生（如區域性放大圖所示）。

在前端工程師完成頁面的靜態程式碼之後，視覺設計師可以將定位好的Sprite圖片進行畫素級的優化，去掉不必要的雜色，並且用已存在的索引色對缺失的地方進行補充，這樣不僅能壓縮檔案大小，還能提升設計品質。

Sprite圖片的優化方式有很多種，比如通過索引色排序進行顏色的刪減和替換，或是直接通過畫素描繪進行優化。設計師可以根據具體的場景進行選擇和處理。

以上設計和優化的方法只是我在工作中一些經驗的積累和總結，個人感覺每一個點展開來都有很多值得研究和討論的地方，限於篇幅有限不能繼續深入。關於圖片優化的高階技巧有兩篇比較經典的文章推薦給大家：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。

4、附錄-Photoshop中各種引數的含義及設定技巧

PNG8的引數設定

減低顏色深度演算法與顏色

指定用於生成顏色查詢表的方法，以及想要在顏色查詢表中使用的顏色數量。可以選擇以下減低顏色深度演算法之一：

1. 1、可感知：通過為人眼比較靈敏的顏色賦以優先權來建立自定顏色表。
2. 2、可選擇：建立一個顏色表，此表與”可感知”顏色表類似，但對大範圍的顏色區域和保留 Web 顏色有利。此顏色表通常會生成具有最大顏色完整性的影象。“可選擇”是預設選項。
3. 3、隨樣性：通過從影象的主要色譜中提取色樣來建立自定顏色表。例如，只包含綠色和藍色的影象產生主要由綠色和藍色構成的顏色表。大多數影象的顏色集中在色譜的特定區域。
4. 4、受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）調板通用的標準 216 色顏色表。該選項確保當使用 8 位顏色顯示影象時，不會對顏色應用瀏覽器仿色。（該調板也稱為 Web 安全調板。） 使用 Web 調板可能會建立較大的檔案，因此，只有當避免瀏覽器仿色是優先考慮的因素時，才建議使用該選項。
5. 5、自定：使用使用者建立或修改的調色盤。如果開啟現有的 GIF 或 PNG-8 檔案，它將具有自定調色盤。使用”儲存為 Web 和裝置所用格式”對話方塊中的”顏色表”調板可自定顏色查詢表。
6. 6、黑白、灰度、Mac OS、Windows使用一組調色盤。

建議：一般情況下預設選擇“可選擇”項即可。

仿色方法和仿色

確定應用程式仿色的方法和數量。”仿色”是指模擬計算機的顏色顯示系統中未提供的顏色的方法。

較高的仿色百分比使影象中出現更多的顏色和更多的細節，但同時也會增大檔案大小。為了獲得最佳壓縮比，請使用可提供所需顏色細節的最低百分比的仿色。

若影象所包含的顏色主要是純色，則在不應用仿色時通常也能正常顯示。包含連續色調（尤其是顏色漸變）的影象，可能需要仿色以防止出現顏色條帶現象。

可以選擇以下幾種仿色方法之一：

1. 1、擴散：應用與”圖案”仿色相比通常不太明顯的隨機圖案。仿色效果在相鄰畫素間擴散。
2. 2、圖案：使用類似半調的方形圖案模擬顏色表中沒有的任何顏色。
3. 3、雜色：應用與”擴散”仿色方法相似的隨機圖案，但不在相鄰畫素間擴散圖案。使用”雜色”仿色方法時不會出現接縫。

建議：一般只在圖片顏色過多產生失真的情況下才需要選擇仿色。建議選擇擴散仿色，可以適當調節仿色的百分比以達到最佳的效果。仿色度越高檔案大小也越大。

透明度和雜邊

確定如何優化影象中的透明畫素。

1. 1、要使完全透明的畫素透明並將部分透明的畫素與一種顏色相混合，請選擇”透明度”，然後選擇一種雜邊顏色。
2. 2、要使用一種顏色填充完全透明的畫素並將部分透明的畫素與同一種顏色相混合，請選擇一種雜邊顏色，然後取消選擇”透明度”。
3. 3、要選擇雜邊顏色，請單擊”雜邊”色板，然後在拾色器中選擇一種顏色。或者，也可以從”雜邊”選單中選擇一個選項：”吸管”（使用吸管樣本框中的顏色）、”前景色”、”背景色”、”白色”、”黑色”或”其它”（使用拾色器）。

建議：強烈建議由視覺設計師根據實際應用場景在儲存之前就處理好透明影象的背景。

交錯

PNG、GIF這兩種影象格式都提供了一種功能，讓影象能夠更快地顯示。影象可以以一種特殊方式儲存，顯示時先大概顯示影象的草圖，當檔案全部下載後再填充細節。這起到一種很有意義的心理效果，因為這樣使人們有東西可看，而不必坐著乾等大型影象慢慢顯示在螢幕上。

建議：對於尺寸和檔案大小相對較大的圖片建議勾選此項。

JPG的引數設定

品質

相關推薦