第一次寫(xiě)技術(shù)博客，有不盡如人意的地方，還請(qǐng)見(jiàn)諒和指正。
為什么想整理這方面的類(lèi)容，我覺(jué)得就像油畫(huà)家要了解他的顏料和畫(huà)布、雕塑家要了解他的石材一樣，作為網(wǎng)頁(yè)設(shè)計(jì)師也應(yīng)該對(duì)圖片格式的特性有一定了解，這樣才能更好的表達(dá)你的創(chuàng)意和想法。
除此之外，我們?cè)谄綍r(shí)工作中也會(huì)遇到許多與圖片格式相關(guān)的問(wèn)題。比如設(shè)計(jì)師會(huì)奇怪為什么有些頁(yè)面的產(chǎn)出物總是沒(méi)法達(dá)到設(shè)計(jì)稿那樣的品質(zhì)和效果，什么樣的設(shè)計(jì)才更適合Web頁(yè)面;頁(yè)面重構(gòu)師和前端工程師則想知道在切圖的時(shí)候應(yīng)采用什么圖片格式、如何進(jìn)行參數(shù)設(shè)置才能達(dá)到品質(zhì)和性能的最優(yōu)化。
有時(shí)候我們可能會(huì)因?yàn)橐粡埜袷讲徽_的圖片而導(dǎo)致設(shè)計(jì)品質(zhì)的下降以及頁(yè)面性能的降低。了解圖片格式的特性就是為解答這些困惑從而讓我們?cè)O(shè)計(jì)的產(chǎn)品更好、更快。
本文主要包括以下幾方面內(nèi)容：
1、基本概念
矢量圖與位圖
有損壓縮與無(wú)損壓縮
2、實(shí)際應(yīng)用
什么時(shí)候應(yīng)該使用PNG
什么時(shí)候應(yīng)該使用JPG
總結(jié)
3、思考與實(shí)踐
什么樣的設(shè)計(jì)更適合Web頁(yè)面?
我們還可以做些什么?
4、附錄-Photoshop中各種參數(shù)的含義及設(shè)置技巧
1、基本概念
要了解圖片格式的特性，首先得從一些基本概念開(kāi)始。這部分內(nèi)容讀起來(lái)可能會(huì)比較枯燥，但如果你耐著性子讀完它，相信會(huì)獲益匪淺。
矢量圖與位圖
矢量圖-完美的幾何圖形
矢量圖是通過(guò)組成圖形的一些基本元素，如點(diǎn)、線、面，邊框，填充色等信息通過(guò)計(jì)算的方式來(lái)顯示圖形的。就好比我們?cè)趲缀螌W(xué)里面描述一個(gè)圓可以通過(guò)它的圓心位置和半徑來(lái)描述，當(dāng)然還可以通過(guò)邊框的粗細(xì)、顏色以及填充的顏色等數(shù)據(jù)去描述它的樣式。而電腦在顯示的時(shí)候則通過(guò)這些數(shù)據(jù)去繪制出我們定義的圖像。
矢量圖的優(yōu)點(diǎn)在于文件相對(duì)較小，并且放大縮小不會(huì)失真。缺點(diǎn)則是這些完美的幾何圖形很難表現(xiàn)自然度高的寫(xiě)實(shí)圖像。
需要強(qiáng)調(diào)說(shuō)明的是我們?cè)趙eb頁(yè)面上所使用的圖像都是位圖，即便有些稱(chēng)為矢量圖形(如矢量icon等)也是指通過(guò)矢量工具進(jìn)行繪制然后再轉(zhuǎn)成位圖格式在web上使用的(區(qū)別于像素繪制的圖形)。
位圖-神奇的拼圖
位圖又叫像素圖或柵格圖，它是通過(guò)記錄圖像中每一個(gè)點(diǎn)的顏色、深度、透明度等信息來(lái)存儲(chǔ)和顯示圖像。一張位圖就好比一幅大的拼圖，只不過(guò)每個(gè)拼塊都是一個(gè)純色的像素點(diǎn)，當(dāng)我們把這些不同顏色的像素點(diǎn)按照一定規(guī)律排列在一起的時(shí)候，就形成了我們所看到的圖像。所以當(dāng)我們放大一幅像素圖時(shí)，能看到這些拼片一樣的像素點(diǎn)(如下圖)。
位圖的優(yōu)點(diǎn)是利于顯示色彩層次豐富的寫(xiě)實(shí)圖像。缺點(diǎn)則是文件大小較大，放大和縮小圖像會(huì)失真。
盡管我們?cè)趙eb頁(yè)面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是通過(guò)記錄像素點(diǎn)的數(shù)據(jù)來(lái)保存和顯示圖像，但這些不同格式的圖像在記錄這些數(shù)據(jù)時(shí)的方式卻不一樣，這就是涉及到有損壓縮和無(wú)損壓縮的區(qū)別。
有損壓縮與無(wú)損壓縮
有損壓縮-你看到的不一定是真實(shí)的
按照我的理解有損壓縮就是在存儲(chǔ)圖像的時(shí)候并不完全真實(shí)的記錄圖像上每個(gè)像素點(diǎn)的數(shù)據(jù)信息，它會(huì)根據(jù)人眼觀察現(xiàn)實(shí)世界的特性(人眼對(duì)光線的敏感度比對(duì)顏色的敏感度要高，生物實(shí)驗(yàn)證明當(dāng)顏色缺失時(shí)人腦會(huì)利用與附近最接近的顏色來(lái)自動(dòng)填補(bǔ)缺失的顏色)對(duì)圖像數(shù)據(jù)進(jìn)行處理，去掉那些圖像上會(huì)被人眼忽略的細(xì)節(jié)，然后使用附近的顏色通過(guò)漸變或其他形式進(jìn)行填充。這樣既能大大降低圖像信息的數(shù)據(jù)量，又不會(huì)影響圖像的還原效果。
JPG是我們最常見(jiàn)的采用有損壓縮對(duì)圖像信息進(jìn)行處理的圖片格式。JPG在存儲(chǔ)圖像時(shí)會(huì)把圖像分解成8*8像素的柵格(如上圖)，然后對(duì)每個(gè)柵格的數(shù)據(jù)進(jìn)行壓縮處理，當(dāng)我們放大一幅圖像的時(shí)候，就會(huì)發(fā)現(xiàn)這些8*8像素柵格中很多細(xì)節(jié)信息被去除，而通過(guò)一些特殊算法用附近的顏色進(jìn)行填充(為了讓大家看得更清楚我將圖像的壓縮比率調(diào)到很低)。這也是為什么我們用JPG存儲(chǔ)圖像有時(shí)會(huì)產(chǎn)生塊狀模糊的原因。
無(wú)損壓縮-最精確的拼圖
相對(duì)有損壓縮而言無(wú)損壓縮則會(huì)真實(shí)的記錄圖像上每個(gè)像素點(diǎn)的數(shù)據(jù)信息，但為了壓縮圖像文件的大小會(huì)采取一些特殊的算法。無(wú)損壓縮的壓縮原理是先判斷圖像上哪些區(qū)域的顏色是相同的，哪些是不同的，然后把這些相同的數(shù)據(jù)信息進(jìn)行壓縮記錄，(例如一片藍(lán)色的天空之需要記錄起點(diǎn)和終點(diǎn)的位置就可以了)，而把不同的數(shù)據(jù)另外保存(例如天空上的白云和漸變等數(shù)據(jù))。
PNG是我們最常見(jiàn)的一種采用無(wú)損壓縮的圖片格式。無(wú)損壓縮在存儲(chǔ)圖像前會(huì)先判斷圖像上哪些地方是相同的哪些地方是不同的，為此需要對(duì)圖像上所有出現(xiàn)的顏色進(jìn)行索引(如上圖)，我們把稱(chēng)這些顏色稱(chēng)為索引色。索引色就好比繪制這幅圖像的“調(diào)色版”，PNG在顯示圖像的時(shí)候則會(huì)用“調(diào)色版”上的這些顏色去填充相應(yīng)的位置。
這里大家可能會(huì)疑惑既然PNG采用的是無(wú)損壓縮為什么我們保存的PNG格式圖片還會(huì)有失真呢?這是因?yàn)闊o(wú)損壓縮只是說(shuō)它的壓縮方式會(huì)盡可能真實(shí)的還原圖像，但從它的壓縮原理我們可以知道它是通過(guò)索引圖像上相同區(qū)域的顏色進(jìn)行壓縮和還原的，這就意味著只有在圖像上出現(xiàn)的顏色數(shù)量小于我們可以保存的顏色數(shù)量時(shí)，我們才能真實(shí)的記錄和還原圖像，否則就會(huì)丟失一些圖像信息(PNG8最多只能索引256種顏色，所以對(duì)于顏色較多的圖像不能真實(shí)還原;PNG24 則可以保存1600多萬(wàn)種顏色，基本能夠真實(shí)還原我們?nèi)祟?lèi)肉眼所可以分別的所有顏色;PNG格式最多可以保存48位顏色通道)。而對(duì)于有損壓縮來(lái)說(shuō)，不管圖像上的顏色多少，都會(huì)損失圖像信息。
JPG和PNG
關(guān)于JPG和PNG的基本信息介紹這里就不贅述了，有興趣詳細(xì)了解的同學(xué)可以去這里：什么是JPG、什么是PNG。另外這里我們也不對(duì)GIF進(jìn)行討論，是因?yàn)镻NG就是為取代GIF而生的，而且PNG的壓縮算法也要優(yōu)于GIF，所以只要不是需要?jiǎng)赢?huà)效果的地方強(qiáng)烈建議都采用PNG格式圖片。
這里我們不妨把JPG和PNG的一些特性進(jìn)行一個(gè)簡(jiǎn)單對(duì)比：
格式壓縮模式交錯(cuò)支持透明支持動(dòng)畫(huà)支持
JPG有損壓縮支持不支持不支持
PNG無(wú)損壓縮支持支持不支持
JPG的特性
1、支持?jǐn)z影圖像或?qū)憣?shí)圖像的高級(jí)壓縮，并且可利用壓縮比例控制圖像文件大小。
2、有損壓縮會(huì)使圖像數(shù)據(jù)質(zhì)量下降，并且在編輯和重新保存JPG格式圖像時(shí)，這種下降損失會(huì)累積。
3、JPG不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片。PNG的特性
1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
2、PNG用來(lái)存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到16位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可存儲(chǔ)多到16位的α通道數(shù)據(jù)。
3、對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無(wú)損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁(yè)面上。
PNG8與PNG24
提到PNG格式就不得不提到PNG8和PNG24，這種叫法并非官方定義，不過(guò)由于普遍使用已經(jīng)被大家廣泛接受了。通過(guò)前面的介紹我們知道PNG采用無(wú)損壓縮是通過(guò)索引色去存儲(chǔ)和還原圖像的，PNG8和PNG24后面的數(shù)字則是代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬(wàn)色。
不僅如此，PNG8還支持1位的布爾透明通道，所謂布爾透明指的是要么完全透明要么完全不透明。而PNG24則支持8位(256階)的alpha通道透明，也就是說(shuō)可以存儲(chǔ)從完全透明到完全不透明一共256個(gè)層級(jí)的透明度(即所謂的半透明)。
格式最高支持色彩通道索引色編輯支持透明支持
PNG8256色支持支持布爾透明
PNG24約1600萬(wàn)色不支持支持8位(256階)alpha透明
可能通過(guò)以上特性的對(duì)比大家還不能很直觀的理解在實(shí)際應(yīng)用中到底因該選擇什么格式的圖片文件，我們不妨結(jié)合上面的基本概念通過(guò)幾個(gè)例子去給大家說(shuō)明。
2、實(shí)際應(yīng)用
什么時(shí)候應(yīng)該使用PNG
示例1
下圖是淘寶網(wǎng)最常見(jiàn)的一個(gè)圖片即“立刻購(gòu)買(mǎi)”按鈕，這里我嘗試用JPG和PNG8格式分別進(jìn)行保存，可以看到保存的結(jié)果有兩個(gè)值得注意的地方：
1、JPG保存的文件大小是PNG保存的文件大小的2倍
2、JPG不僅文件更大并且還出現(xiàn)了噪點(diǎn)(如圖中紅色方框標(biāo)注的)
那么是什么原因造成這樣的差異呢?