JPG、PNG和GIF圖片的基本原理及優(yōu)化方法

時間：2022-05-25 21:27:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-25 21:27:01 來源：網(wǎng)絡(luò)營銷

一提到圖片，我們就不得不從位圖開始說起，位圖圖像(bitmap)，也稱為點陣圖像或繪制圖像，是由稱作像素（圖片元素）的單個點組成的。這些點可以進(jìn)行不同的排列和染色以構(gòu)成一副圖片。當(dāng)放大位圖時，可以看見賴以構(gòu)成整個圖像的無數(shù)單個方塊。

我們常見的圖片格式中JPG、PNG、GIF亦屬于位圖，所以它們的數(shù)據(jù)結(jié)構(gòu)大致相同，只是每一種圖片格式都有不同的壓縮算法，不同的掃描方式，但是優(yōu)化的方法都有一個共同點，都是圍繞著每個像素顏色值來下手，那么我們具體該如何進(jìn)行優(yōu)化呢？下面我就借助億企邦的平臺來給大家介紹一下圖片的一些基本原理和優(yōu)化的方法：

一、JPG圖片的原理與優(yōu)化

JPG是一種對彩色或灰階之類連續(xù)色調(diào)圖形作壓縮和解壓縮的標(biāo)準(zhǔn)，這個標(biāo)準(zhǔn)是由ISO/IEC JTC1/SC29 WG10所訂定。

壓縮算法為正、反離散余弦轉(zhuǎn)換，如下圖所示：

如果是反離散余弦轉(zhuǎn)換即把整個流程反轉(zhuǎn)。

億企邦提醒大家一點：這里的8X8像素區(qū)塊是我們JPG優(yōu)化方法的重點，在之后會涉及到取樣、區(qū)塊量化、掃描的步驟，然而取樣、區(qū)塊量化這兩個步驟將是導(dǎo)致圖像失真的過程，也是我們優(yōu)化工作所涉及到核心部分。

1、取樣

這里所提到的可以很好的解釋到下面JPG優(yōu)化方法中的色彩優(yōu)化；

JPG將不同的色彩當(dāng)作獨立的成份，因此各個成份可以被視為一個灰階影像來處理，如果各個顏色成份間沒有關(guān)聯(lián)性時．便可以將壓縮的效果處理得最好，因此把紅(R)、綠(G)、藍(lán)(B)的成份轉(zhuǎn)換成：亮度 (Luminance)(Y)、色度 (Chrominance)(Cb和 Cr)，使得各項沒有關(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

由于人的視力系統(tǒng)對色度的敏銳度不高 ，因此以YCbCr色度的方式來表示可以再做一次作取樣(Subsampling)來減低信息量，如下圖所示：

4:4:4格式代表YCbCr原來完整的信息，可以再次取樣以4:2:2或4:2:0格式來表達(dá);4:2:2格式將原本的信息量減少為三分之二，而4:2:0格式則可以將信息三減少為一半。雖然色度的信息量減少了．但對人的視覺神經(jīng)而言卻僅僅感受到微小的差別而已。

2、區(qū)塊量化

為了說明執(zhí)行離散余弦轉(zhuǎn)換(DCT)的影響，我們將一張圖去下的8×8區(qū)塊的亮度資料轉(zhuǎn)換成符合DCT運算范圍內(nèi)的系數(shù)表，如下圖所示：

低頻部分包含了區(qū)塊的大部分能量，而對視覺較不敏感的高頻部分，則通常只含有較低的能量。

接下來對亮度系數(shù)做量化處理的矩陣系數(shù)表，如下圖所示：

在亮度系數(shù)的量化方面每個DCT系數(shù)除以相對的量化矩陣的值，在四舍五入后得到如下的量化后DCT系數(shù)（例如-80/16=-5），如下圖所示：

注意量化后區(qū)塊高頻部份出現(xiàn)許多零值，代表人類視覺系統(tǒng)對高頻部份并不敏感。由于四舍五入的部份并不能在解碼時重現(xiàn)，因此這個步驟將是個失真的過程。

3、掃描

區(qū)塊在量化之后，只有低頻的部分有非零值，為了進(jìn)一步地減少儲存空間的大小，盡可能地將零值放在一起，使得處理時能以幾個零來表示而非個別的處理每個零，因此運用了如下圖的方式做斜向掃描：

這種斜向掃描的掃描線乃是沿著空間頻率大小增加的方向作掃描的，使得許多的零可以被串接在一起，以達(dá)到更好的效果。

了解上述3個流程后，后續(xù)我們做JPG優(yōu)化的時候會更得心應(yīng)手了，如何處理顏色，如何減少顏色數(shù)值而卻又最少的減少圖片失真的比率。

接下來億企邦就為大家介紹下JPG常用的幾種優(yōu)化方法：

1、8像素柵格

如下面這2副圖片所示，圖片為32X32，白色方塊寬高為8X8：

正如大家看到的，左上角的小方塊正好對齊在“8像素柵格”，這樣就確保小方塊保持是銳利。當(dāng)保存的時候，圖片會被分成許多的8×8 px的區(qū)塊，而軟件是對每一個區(qū)塊進(jìn)行獨立優(yōu)化的。由于右下方的方塊并不匹配這些區(qū)塊（也就是這個方塊跨越了幾個區(qū)塊，正好落于區(qū)塊的交接線上），優(yōu)化器在尋找索引的時候就會在黑色和白色之間尋找平衡，即添加了雜色。

8像素柵格示例：

不仔細(xì)看可能發(fā)現(xiàn)不了，第二幅圖片中盒子的黑子蓋子左邊超出的區(qū)域、99數(shù)字超出的多余像素均已刪除，198.00元下移了一個像素，3個很簡單的操作便可減少約1K，做到這一步，大家肯定會考慮一個問題，難道每次做圖的時候都要拉著么輔助線不麻煩么？
其實，這里只是為了做一個精確的示范，如果應(yīng)用到工作中，我們大可將8X8的輔助方格改為16X16或者32X32。

2、圖片質(zhì)量

不要保存質(zhì)量為100的圖片。這個并不是最高質(zhì)量的圖片，只是一個數(shù)值上的優(yōu)化底線，最終你會得到一個不合理的大文件。事實上把質(zhì)量設(shè)置在95以上就已經(jīng)足以防止丟失信息了。

在質(zhì)量上有個分水嶺，這就是我們通常建議JPG質(zhì)量最好是在60左右的原因。當(dāng)在Photoshop中把質(zhì)量設(shè)置低于51的時候，它就會執(zhí)行另一個叫做“降色采樣（原文：color down-sampling）”的優(yōu)化算法，它會在8個像素周圍平均采樣，這樣會在邊緣產(chǎn)生雜色。

因此，如果圖片很小而且對比很大，建議在Photoshop中不要設(shè)置質(zhì)量低于51。

圖例（左為質(zhì)量51右為質(zhì)量50）：

3、色彩優(yōu)化

這里優(yōu)化的原理在于解壓縮過程，反量化與斜向掃描中著手。這里涉及到兩個量化矩陣（亮度與色度）的處理。

但是此方法用到的情況相對比較少，所以這里只做簡短的介紹。

Photoshop有一個Lab的顏色模式，L表示亮度（Luminosity），a表示從洋紅色至綠色的范圍，b表示從黃色至藍(lán)色的范圍。

其中在這里最重要的就是明度（也稱為亮度），優(yōu)化圖像的時候通常是壓縮顏色通道，但盡可能保持高亮的亮度通道，因為人們對它最為敏感。

億企邦提醒大家一點，這里最關(guān)鍵的是濾鏡>>雜色>>中間值針對A,B兩個通道的顏色做處理。

二、PNG圖片的原理與優(yōu)化

PNG，圖像文件儲存格式，其目的是試圖替代GIF和TIFF的文件格式，同時增加一些GIF所不具備的特性。PNG提供5種圖片類型：灰度，真彩色，索引色，帶alpha通道的灰度，帶alpha通道的真彩色，遺憾的是Photoshop只能導(dǎo)出3種圖像類型：帶透明的索引顏色，真彩色，帶透明度的真彩色。

對于PNG圖像，可以分為索引（Index）圖和RGB圖兩種，索引圖只包含固定數(shù)量的顏色，而RGB圖的顏色數(shù)量是不受限制的。

索引圖：為節(jié)約存儲，把圖像中使用的顏色與一個顏色表對應(yīng)起來，索引色常使用16色、32色、64色、128色或256色等，但最多不得超過256色；

RGB圖：的每一個象素都保存一個RGB值，代表這個象素的顏色，因此，一張RGB圖有多少個象素，文件中就保存多少個RGB值。

1、壓縮

PNG采取的是LZ77無損數(shù)據(jù)壓縮算法：LZ77算法簡單來說就是通過使用編碼器或者解碼器中已經(jīng)出現(xiàn)過的相應(yīng)匹配數(shù)據(jù)信息替換當(dāng)前數(shù)據(jù)從而實現(xiàn)壓縮功能。

最重要的還是線性過濾（也稱為“三角過濾”），PNG有5種過濾器，None（無過濾），Sub（當(dāng)前值減去左側(cè)像素的值），Up（減去上方像素的值），Average（減去左側(cè)和上方像素的平均值）和Paeth（替換上方，左邊或者上方的左邊像素值，并重新以Alan Paeth命名）。下面只舉例其中之一的Up過濾：

以數(shù)字2為標(biāo)識的每一行都經(jīng)過了“Up過濾”，“Up過濾”向 png 解碼器發(fā)送信息：“對于當(dāng)前的像素，提取上方像素的值，并將其添加到當(dāng)前值”。圖中第2-5行垂直方向都擁有相同的值。所以它們的值都是0，如果這樣的圖片越大那么壓縮比率也越大。

2、掃描

PNG的掃描方式很簡單，只存在兩種：非隔行掃描、Adam7(7遍隔行掃描方法)

Adam7(由Adam M. Costello開發(fā)的7遍隔行掃描方法)，原理如下圖所示：




圖片示例：

億企邦常用的兩種PNG優(yōu)化方法：

1、色調(diào)分離

優(yōu)化原理：有效的減少色彩數(shù)，合并相似的顏色，創(chuàng)建出色調(diào)區(qū)域，更好的執(zhí)行“線性過濾”，得到高壓縮率。

缺點：這種方法有一定的局限性，尤其是優(yōu)化的圖片與 html 背景融合的情況下須慎用。

這里的色階值可根據(jù)實際情況設(shè)置：

2、圖層分離

有時候因為圖片中存在一些半透明像素，不得不保存一個“重量級”的PNG-24文件。如果將此類圖像一分為二，一部分是不透明像素，另一部分則為半透明，然后各以適當(dāng)格式保存。

比如你可以用PNG-24格式保存半透明像素，而不透明像素則用PNG-8甚至JPEG格式保存。

例如：

億企邦推薦的操作步驟：

（1）、在圖層面板中Ctrl+左鍵單擊圖層建立選區(qū)；

（2）、切換至通道面板，將選區(qū)儲存為通道；

（3）、選擇該通道，取消選區(qū)，將閾值（圖像 -> 調(diào)整 -> 閾值）調(diào)至255；

（4）、再次Ctrl+左鍵單擊該通道建立選區(qū)并隱藏該通道，然后選擇原始圖層，打開圖層 -> 新建 -> 通過剪切的圖層，即能得到上面兩幅分離后的圖片。

（5）、可再次對兩幅圖片進(jìn)行色調(diào)分離等方法進(jìn)行優(yōu)化。

此方法類似活動中背景圖過大時進(jìn)行分割是為同一個道理，多增加一個請求而把圖片拆分，進(jìn)行疊加。

三、GIF圖片的原理與優(yōu)化

由于GIF現(xiàn)在使用率偏低，除非需要用到GIF動畫，由于PNG本身是開發(fā)者為了代替GIF而衍生出的圖片格式，所以透明圖片建議采用PNG8。下面億企邦就簡單的介紹下GIF的原理：

GIF(Graphics Interchange Format)的原義是“圖像互換格式”，是CompuServe公司在1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應(yīng)用程序。GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的動畫。

GIF格式的特點是壓縮比高，磁盤空間占用較少，所以這種圖像格式迅速得到了廣泛的應(yīng)用。最初的GIF只是簡單地用來存儲單幅靜止圖像（稱為GIF87a），后來隨著技術(shù)發(fā)展，可以同時存儲若干幅靜止圖像進(jìn)而形成連續(xù)的動畫，使之成為當(dāng)時支持2D動畫為數(shù)不多的格式之一（稱為GIF89a），而在GIF89a圖像中可指定透明區(qū)域，使圖像具有非同一般的顯示效果，這更使GIF風(fēng)光十足。在Internet上大量采用的彩色動畫文件多為這種格式的文件，也稱為GIF89a格式文件。

此外，考慮到網(wǎng)絡(luò)傳輸中的實際情況，GIF圖像格式還增加了漸顯方式，也就是說，在圖像傳輸過程中，用戶可以先看到圖像的大致輪廓，然后隨著傳輸過程的繼續(xù)而逐步看清圖像中的細(xì)節(jié)部分，從而適應(yīng)了用戶“從朦朧到清楚”的觀賞心理。

但GIF有個小小的缺點，即不能存儲超過256色的圖像。盡管如此，這種格式仍在網(wǎng)絡(luò)上大行其道應(yīng)用，這和GIF圖像文件短小、下載速度快、可用許多具有同樣大小的圖像文件組成動畫等優(yōu)勢是分不開的

LZW壓縮算法

LZW就是通過建立一個字符串表，用較短的代碼來表示較長的字符串來實現(xiàn)壓縮，字符串和編碼的對應(yīng)關(guān)系是在壓縮過程中動態(tài)生成的，并且隱含在壓縮數(shù)據(jù)中，解壓的時候根據(jù)表來進(jìn)行恢復(fù)，算是一種無損壓縮。

例如：

正常文本：好人經(jīng)常說自己是好人，但是我確實是個好人。

壓縮文本：$1經(jīng)常說自己是$1，但是我確實是個$1. $1=[好人]

億企邦知識擴展：

除基本的灰度“紅綠藍(lán)”（外語簡稱：rgb）或“青色、洋紅、黃、黑”（外語簡稱：cmyk）和“輕盈a-b”（外語簡稱：lab）模式之外，photoshop支持（或處理）其他的顏色模式，這些模式包括位圖模式、灰度模式、雙色調(diào)模式、索引顏色模式和多通道模式。并且這些顏色模式有其特殊的用途。例如，灰度模式的圖像只有灰度值而沒有顏色信息；索引顏色模式盡管可以使用顏色，但相對于rgb模式和cmyk模式來說，可以使用的顏色真是少之又少。下面就來介紹這幾種顏色模式。

1、位圖（bitmap）模式

位圖模式用兩種顏色（黑和白）來表示圖像中的像素。位圖模式的圖像也叫作黑白圖像。因為其深度為1，也稱為一位圖像。由于位圖模式只用黑白色來表示圖像的像素，在將圖像轉(zhuǎn)換為位圖模式時會丟失大量細(xì)節(jié)，因此photoshop提供了幾種算法來模擬圖像中丟失的細(xì)節(jié)。

在寬度、高度和分辨率相同的情況下，位圖模式的圖像尺寸最小，約為灰度模式的1/7和rgb模式的1/22以下。

2、灰度（grayscale）模式

灰度模式可以使用多達(dá)256級灰度來表現(xiàn)圖像，使圖像的過渡更平滑細(xì)膩?；叶葓D像的每個像素有一個0（黑色）到255（白色）之間的亮度值?；叶戎狄部梢杂煤谏湍采w的百分比來表示（0%等于白色，100%等于黑色）。使用黑折或灰度掃描儀產(chǎn)生的圖像常以灰度顯示。

3、雙色調(diào)（duotone）模式

雙色調(diào)模式采用2-4種彩色油墨來創(chuàng)建由雙色調(diào)（2種顏色）、三色調(diào)（3種顏色）和四色調(diào)（4種顏色）混合其色階來組成圖像。在將灰度圖像轉(zhuǎn)換為雙色調(diào)模式的過程中，可以對色調(diào)進(jìn)行編輯，產(chǎn)生特殊的效果。而使用雙色調(diào)模式最主要的用途是使用盡量少的顏色表現(xiàn)盡量多的顏色層次，這對于減少印刷成本是很重要的，因為在印刷時，每增加一種色調(diào)都需要更大的成本。

4、索引顏色（indexed color）模式

索引顏色模式是網(wǎng)上和動畫中常用的圖像模式，當(dāng)彩色圖像轉(zhuǎn)換為索引顏色的圖像后包含近256種顏色。索引顏色圖像包含一個顏色表。如果原圖像中顏色不能用256色表現(xiàn)，則photoshop會從可使用的顏色中選出最相近顏色來模擬這些顏色，這樣可以減小圖像文件的尺寸。用來存放圖像中的顏色并為這些顏色建立顏色索引，顏色表可在轉(zhuǎn)換的過程中定義或在聲稱索引圖像后修改。

5、多通道（multichannel）模式

多通道模式對有特殊打印要求的圖像非常有用。例如，如果圖像中只使用了一兩種或兩三種顏色時，使用多通道模式可以減少印刷成本并保證圖像顏色的正確輸出。

6、8位/16位通道模式

在灰度“紅綠藍(lán)”（外語簡稱：rgb）或“青色、洋紅、黃、黑”（外語簡稱：cmyk）模式下，可以使用16位通道來代替默認(rèn)的8位通道。根據(jù)默認(rèn)情況，8位通道中包含256個色階，如果增到16位，每個通道的色階數(shù)量為65536個，這樣能得到更多的色彩細(xì)節(jié)。photoshop可以識別和輸入16位通道的圖像，但對于這種圖像限制很多，所有的濾鏡都不能使用，另外16位通道模式的圖像不能被印刷。