- 相關(guān)推薦
設計師必須了解的圖片優(yōu)化技巧
前言： 該文收集了前輩們的一些關(guān)于圖片優(yōu)化的技巧，在此收攏到一起，對于各個(gè)方法的優(yōu)化原理做了一些研究，希望能給大家對于圖片優(yōu)化這一塊起到拋磚引玉的作用。
騰訊財付通設計中心 Jia ：提到圖片，我們不得不從位圖開(kāi)始說(shuō)起，位圖圖像(bitmap)，也稱(chēng)為點(diǎn)陣圖像或繪制圖像，是由稱(chēng)作像素(圖片元素)的單個(gè)點(diǎn)組成的。這些點(diǎn)可以進(jìn)行不同的排列和染色以構成一副圖片。當放大位圖時(shí)，可以看見(jiàn)賴(lài)以構成整個(gè)圖像的無(wú)數單個(gè)方塊。
常見(jiàn)的格式中JPG、PNG、GIF亦屬于位圖，所以它們的數據結構大致相同，只是每一種圖片格式都有不同的壓縮算法，不同的掃描方式，但是優(yōu)化的方法都有一個(gè)共同點(diǎn)，都是圍繞著(zhù)每個(gè)像素顏色值來(lái)下手，具體如何進(jìn)行優(yōu)化呢?
下面來(lái)給大家介紹一下圖片的一些基本原理和優(yōu)化的方法：
1.JPG原理與優(yōu)化
JPG是一種對彩色或灰階之類(lèi)連續色調圖形作壓縮和解壓縮的標準.這個(gè)標準是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉換， 如下圖：
反離散余弦轉換即把整個(gè)流程反轉。
這里的8X8像素區塊是我們JPG優(yōu)化方法的重點(diǎn)，在之后會(huì )涉及到取樣 、區塊量化、掃描 的步驟，然而取樣 、區塊量化 這兩個(gè)步驟將是導致圖像失真的過(guò)程，也是我們優(yōu)化工作所涉及到核心部分。
取樣：
這里所提到的可以很好的解釋到下面JPG優(yōu)化方法中的色彩優(yōu)化;
JPG將不同的色彩當作獨立的成份，因此各個(gè)成份可以被視為一個(gè)灰階影像來(lái)處理，如果各個(gè)顏色成份間沒(méi)有關(guān)聯(lián)性時(shí).便可以將壓縮的效果處理得最好，因此把 紅(R)、綠(G)、藍(B)的成份轉換成：亮度 (Luminance)(Y)、色度 (Chrominance)(Cb和 Cr)，使得各項沒(méi)有關(guān)聯(lián)的成份：
Y = 0.299R+0.587G+0.144B
Cb = -0.169R-0.331G+0.500B
Cr = 0.500R- 0.419G 0.081B
由于人的視力系統對色度的敏銳度不高 ，因此以YCbCr色度的方式來(lái)表示可以再做一次作取樣(Subsampling)來(lái)減低信息量：
4:4:4格式代表YCbCr原來(lái)完整的信息，可以再次取樣以4:2:2或4:2:0格式來(lái)表達;4:2:2格式將原本的信息量減少為三分之二，而4:2:0格式則可以將信息三減少為一半。雖然色度的信息量減少了.但對人的視覺(jué)神經(jīng)而言卻僅僅感受到微小的差別而已。
區塊量化：
為了說(shuō)明執行離散余弦轉換(DCT)的影響，我們將以自一張圖去下的8×8區塊的亮度資料轉換成符合DCT運算范圍內的系數表：
低頻部分包含了區塊的大部分能量，而對視覺(jué)較不敏感的高頻部分，則通常只含有較低的能量。
接下來(lái)對亮度系數做量化處理的矩陣系數表：
在亮度系數的量化方面每個(gè)DCT系數除以相對的量化矩陣的值，在四舍五入后得到如下的量化后 DCT 系數(例如-80/16=-5)：
注意量化后區塊高頻部份出現許多零值，代表人類(lèi)視覺(jué)系統對高頻部份并不敏感。由于四舍五入的部份并不能在解碼時(shí)重現，因此這個(gè)步驟將是個(gè)失真的過(guò)程。
掃描：
區塊在量化之后，只有低頻的部分有非零值，為了進(jìn)一步地減少儲存空間的大小，盡可能地將零值放在一起，使得處理時(shí)能以幾個(gè)零來(lái)表示而非個(gè)別的處理每個(gè)零，因此運用了如下圖的方式做斜向掃描：
這種斜向掃描的掃描線(xiàn)乃是沿著(zhù)空間頻率大小增加的方向作掃描的，使得許多的零可以被串接在一起，以達到更好的效果。
了解上述3個(gè)流程后，后續我們做JPG優(yōu)化的時(shí)候會(huì )更得心應手了，如何處理顏色，如何減少顏色數值而卻又最少的減少圖片失真的比率。
接下來(lái)為大家介紹下JPG常用的幾種優(yōu)化方法：
8像素柵格
如下2副圖片所示，圖片為32X32，白色方塊寬高為8X8：
正如大家看到的，左上角的小方塊正好對齊在"8像素柵格"，這樣就確保小方塊保持是銳利。當保存的時(shí)候，圖片會(huì )被分成許多的8×8 px的區塊，而軟件是對每一個(gè)區塊進(jìn)行獨立優(yōu)化的。由于右下方的方塊并不匹配這些區塊(也就是這個(gè)方塊跨越了幾個(gè)區塊，正好落于區塊的交接線(xiàn)上)，優(yōu)化器 在尋找索引的時(shí)候就會(huì )在黑色和白色之間尋找平衡，即添加了雜色。
示例：
不仔細看可能發(fā)現不了，第二幅圖片中盒子的黑子蓋子左邊超出的區域、99數字超出的多余像素均已刪除，198.00元下移了一個(gè)像素，3個(gè)很簡(jiǎn)單的操作便可減少約1K，做到這一步，大家肯定會(huì )考慮一個(gè)問(wèn)題，難道每次做圖的時(shí)候都要拉著(zhù)么輔助線(xiàn)不麻煩么?
其實(shí)，這里只是為了做一個(gè)精確的示范，如果應用到工作中，我們大可將8X8的輔助方格改為16X16或者32X32。
圖片質(zhì)量
不要保存質(zhì)量為100的圖片。這個(gè)并不是最高質(zhì)量的圖片，只是一個(gè)數值上的優(yōu)化底線(xiàn)，最終你會(huì )得到一個(gè)不合理的大文件。事實(shí)上把質(zhì)量設置在95以上就已經(jīng)足以防止丟失信息了。
在質(zhì)量上有個(gè)分水嶺，這就是我們通常建議JPG質(zhì)量最好是在60左右的原因。當在Photoshop中把質(zhì)量設置低于51的時(shí)候，它就會(huì )執行另一個(gè)叫做 "降色采樣(原文：color down-sampling)"的優(yōu)化算法，它會(huì )在8個(gè)像素周?chē)骄蓸�，這樣會(huì )在邊緣產(chǎn)生雜色。
因此，如果圖片很小而且對比很大，建議在Photoshop中不要設置質(zhì)量低于51。
圖例(左為質(zhì)量51右為質(zhì)量50)：
色彩優(yōu)化
這里優(yōu)化的原理在于解壓縮過(guò)程，反量化與斜向掃描中著(zhù)手。這里涉及到兩個(gè)量化矩陣(亮度與色度) 的處理。
但是此方法用到的情況相對比較少，所以這里只做簡(jiǎn)短的介紹。
Photoshop有一個(gè)Lab的顏色模式，L表示亮度(Luminosity)，a表示從洋紅色至綠色的范圍，b表示從黃色至藍色的范圍。
其中在這里最重要的就是明度(也稱(chēng)為亮度)，優(yōu)化圖像的時(shí)候通常是壓縮顏色通道，但盡可能保持高亮的亮度通道，因為人們對它最為敏感。
這里最關(guān)鍵的是濾鏡 >>雜色 >>中間值 針對A,B兩個(gè)通道的顏色做處理
2.PNG原理與優(yōu)化
PNG，圖像文件儲存格式，其目的是試圖替代GIF和TIFF的文件格式，同時(shí)增加一些GIF所不具備的特性。PNG提供5種圖片類(lèi)型：灰度，真彩色，索引色，帶alpha通道的灰度，帶alpha通道的真彩色，遺憾的是Photoshop只能導出3種圖像類(lèi)型：帶透明的索引顏色，真彩色，帶透明度的真彩色 。
對于PNG圖像，可以分為索引(Index)圖和RGB圖兩種，索引圖只包含固定數量的顏色，而RGB圖的顏色數量是不受限制的。
索引圖：為節約存儲，把圖像中使用的顏色與一個(gè)顏色表對應起來(lái)，索引色常使用16色、32色、64色、128色或256色等，但最多不得超過(guò)256色;
RGB圖：的每一個(gè)象素都保存一個(gè)RGB值，代表這個(gè)象素的顏色，因此，一張RGB圖有多少個(gè)象素，文件中就保存多少個(gè)RGB值;
壓縮：
PNG采取的是LZ77無(wú)損數據壓縮算法：LZ77算法簡(jiǎn)單來(lái)說(shuō)就是通過(guò)使用編碼器或者中已經(jīng)出現過(guò)的相應匹配數據信息替換當前數據從而實(shí)現壓縮功能。
最重要的還是線(xiàn)性過(guò)濾(也稱(chēng)為"三角過(guò)濾")，PNG有5種過(guò)濾器，None(無(wú)過(guò)濾)，Sub(當前值減去左側像素的值)，Up(減去上方像素的 值)，Average(減去左側和上方像素的平均值)和Paeth(替換上方，左邊或者上方的左邊像素值，并重新以Alan Paeth命名)。下面只舉例其中之一的Up過(guò)濾：
以數字2為標識的每一行都經(jīng)過(guò)了"Up過(guò)濾"，"Up過(guò)濾"向 png 發(fā)送信息："對于當前的像素，提取上方像素的值，并將其添加到當前值"。圖中第2-5行垂直方向都擁有相同的值。所以它們的值都是0，如果這樣的圖片越大那么壓縮比率也越大。
掃描：
PNG的掃描方式很簡(jiǎn)單，只存在兩種：非隔行掃描、Adam7(7遍隔行掃描方法)
Adam7(由Adam M. Costello開(kāi)發(fā)的7遍隔行掃描方法)，原理如下圖：
圖片示例：
常用的兩種PNG優(yōu)化方法：
色調分離
優(yōu)化原理：有效的減少色彩數，合并相似的顏色，創(chuàng )建出色調區域，更好的執行"線(xiàn)性過(guò)濾"，得到高壓縮率。
缺點(diǎn)：這種方法有一定的局限性，尤其是優(yōu)化的圖片與 html 背景融合的情況下須慎用。
這里的色階值可根據實(shí)際情況設置：
優(yōu)化圖片對比：
原圖：212KB
優(yōu)化后:146KB
圖層分離
有時(shí)候因為圖片中存在一些半透明像素，不得不保存一個(gè)"重量級"的PNG-24文件。如果將此類(lèi)圖像一分為二，一部分是不透明像素，另一部分則為半透明，然后各以適當格式保存。
比如你可以用 PNG-24 格式保存半透明像素，而不透明像素則用 PNG-8 甚至 JPEG 格式保存。
例如：
操作步驟：
1.在圖層面板中Ctrl+左鍵單擊圖層建立選區;
2.切換至通道面板，將選區儲存為通道;
3.選擇該通道，取消選區，將閾值(圖像 -> 調整 -> 閾值)調至255;
4.再次Ctrl+左鍵單擊該通道建立選區并隱藏該通道，然后選擇原始圖層，打開(kāi)圖層 -> 新建 -> 通過(guò)剪切的圖層，即能得到上面兩幅分離后的圖片。
5.可再次對兩幅圖片進(jìn)行色調分離等方法進(jìn)行優(yōu)化。
此方法類(lèi)似活動(dòng)中背景圖過(guò)大時(shí)進(jìn)行分割是為同一個(gè)道理，多增加一個(gè)請求而把圖片拆分，進(jìn)行疊加。
3.GIF原理與優(yōu)化
由于GIF現在使用率偏低，除非需要用到GIF動(dòng)畫(huà)，由于PNG本身是開(kāi)發(fā)者為了代替GIF而衍生出的圖片格式，所以透明圖片建議采用PNG8。下面只簡(jiǎn)單的介紹下GIF的原理：
GIF(Graphics Interchange Format)的原義是"圖像互換格式"，是CompuServe公司在 1987年開(kāi)發(fā)的圖像文件格式。GIF文件的數據，是一種基于LZW算法的連續色調的無(wú)損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應用程序。 GIF格式的另一個(gè)特點(diǎn)是其在一個(gè)GIF文件中可以存多幅彩色圖像，如果把存于一個(gè)文件中的多幅圖像數據逐幅讀出并顯示到屏幕上，就可構成一種最簡(jiǎn)單的動(dòng) 畫(huà)。
LZW壓縮算法
LZW就是通過(guò)建立一個(gè)字符串表，用較短的代碼來(lái)表示較長(cháng)的字符串來(lái)實(shí)現壓縮，字符串和編碼的對應關(guān)系是在壓縮過(guò)程中動(dòng)態(tài)生成的，并且隱含在壓縮數據中，解壓的時(shí)候根據表來(lái)進(jìn)行恢復，算是一種無(wú)損壓縮。例如：
正常文
【設計師必須了解的圖片優(yōu)化技巧】相關(guān)文章：
職場(chǎng)新人必須了解的職場(chǎng)法則07-10
電腦新手必須了解的電腦知識04-27
網(wǎng)站優(yōu)化技巧方法07-16
創(chuàng )業(yè)者必須了解的四問(wèn)看成效03-02
關(guān)于提升網(wǎng)站優(yōu)化排名的技巧07-20
淺談企業(yè)網(wǎng)站優(yōu)化技巧07-11
求職必須掌握的三個(gè)技巧01-04
20個(gè)升職必須知道的技巧07-10