您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> ps教程 >> 瀏覽設計教程

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

 

前言:該文收集了前輩們的一些關于圖片優(yōu)化的技巧,在此收攏到一起,對于各個方法的優(yōu)化原理做了一些研究,希望能給大家對于圖片優(yōu)化這一塊起到拋磚引玉的作用。

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

常見的格式中JPG、PNG、GIF亦屬于位圖,所以它們的數(shù)據結構大致相同,只是每一種圖片格式都有不同的壓縮算法,不同的掃描方式,但是優(yōu)化的方法都有一個共同點,都是圍繞著每個像素顏色值來下手,具體如何進行優(yōu)化呢?
下面來給大家介紹一下圖片的一些基本原理和優(yōu)化的方法:

1.JPG原理與優(yōu)化
JPG是一種對彩色或灰階之類連續(xù)色調圖形作壓縮和解壓縮的標準.這個標準是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉換,如下圖:

正離散余弦轉換
反離散余弦轉換即把整個流程反轉。
這里的8X8像素區(qū)塊是我們JPG優(yōu)化方法的重點,在之后會涉及到取樣、區(qū)塊量化、掃描的步驟,然而取樣、區(qū)塊量化這兩個步驟將是導致圖像失真的過程,也是我們優(yōu)化工作所涉及到核心部分。

取樣:
這里所提到的可以很好的解釋到下面JPG優(yōu)化方法中的色彩優(yōu)化;
JPG將不同的色彩當作獨立的成份,因此各個成份可以被視為一個灰階影像來處理,如果各個顏色成份間沒有關聯(lián)性時.便可以將壓縮的效果處理得最好,因此把紅(R)、綠(G)、藍(B)的成份轉換成:亮度 (Luminance)(Y)、色度 (Chrominance)(Cb和 Cr),使得各項沒有關聯(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)來減低信息量:

jpg取樣

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

區(qū)塊量化:
為了說明執(zhí)行離散余弦轉換(DCT)的影響,我們將以自一張圖去下的8×8區(qū)塊的亮度資料轉換成符合DCT運算范圍內的系數(shù)表:
QQ圖片20130531152153

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

接下來對亮度系數(shù)做量化處理的矩陣系數(shù)表:
QQ圖片20130531153108

在亮度系數(shù)的量化方面每個DCT系數(shù)除以相對的量化矩陣的值,在四舍五入后得到如下的量化后 DCT 系數(shù)(例如-80/16=-5):
QQ圖片20130531153425

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

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

圖片1
這種斜向掃描的掃描線乃是沿著空間頻率大小增加的方向作掃描的,使得許多的零可以被串接在一起,以達到更好的效果。
了解上述3個流程后,后續(xù)我們做JPG優(yōu)化的時候會更得心應手了,如何處理顏色,如何減少顏色數(shù)值而卻又最少的減少圖片失真的比率。
接下來為大家介紹下JPG常用的幾種優(yōu)化方法:

8像素柵格
如下2副圖片所示,圖片為32X32,白色方塊寬高為8X8:
8x8輔助線 8x8輸出
正如大家看到的,左上角的小方塊正好對齊在“8像素柵格”,這樣就確保小方塊保持是銳利。當保存的時候,圖片會被分成許多的8×8 px的區(qū)塊,而軟件是對每一個區(qū)塊進行獨立優(yōu)化的。由于右下方的方塊并不匹配這些區(qū)塊(也就是這個方塊跨越了幾個區(qū)塊,正好落于區(qū)塊的交接線上),優(yōu)化器在尋找索引的時候就會在黑色和白色之間尋找平衡,即添加了雜色。

示例:
示例

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

圖片質量
不要保存質量為100的圖片。這個并不是最高質量的圖片,只是一個數(shù)值上的優(yōu)化底線,最終你會得到一個不合理的大文件。事實上把質量設置在95以上就已經足以防止丟失信息了。
在質量上有個分水嶺,這就是我們通常建議JPG質量最好是在60左右的原因。當在Photoshop中把質量設置低于51的時候,它就會執(zhí)行另一個叫做“降色采樣(原文:color down-sampling)”的優(yōu)化算法,它會在8個像素周圍平均采樣,這樣會在邊緣產生雜色。
因此,如果圖片很小而且對比很大,建議在Photoshop中不要設置質量低于51。

圖例(左為質量51右為質量50):
質量51 質量50

色彩優(yōu)化
這里優(yōu)化的原理在于解壓縮過程,反量化與斜向掃描中著手。這里涉及到兩個量化矩陣(亮度與色度)的處理。
但是此方法用到的情況相對比較少,所以這里只做簡短的介紹。
Photoshop有一個Lab的顏色模式,L表示亮度(Luminosity),a表示從洋紅色至綠色的范圍,b表示從黃色至藍色的范圍。
通道示意
其中在這里最重要的就是明度(也稱為亮度),優(yōu)化圖像的時候通常是壓縮顏色通道,但盡可能保持高亮的亮度通道,因為人們對它最為敏感。
這里最關鍵的是濾鏡>>雜色>>中間值針對A,B兩個通道的顏色做處理

2.PNG原理與優(yōu)化
PNG,圖像文件儲存格式,其目的是試圖替代GIF和TIFF的文件格式,同時增加一些GIF所不具備的特性。PNG提供5種圖片類型:灰度,真彩色,索引色,帶alpha通道的灰度,帶alpha通道的真彩色,遺憾的是Photoshop只能導出3種圖像類型:帶透明的索引顏色,真彩色,帶透明度的真彩色。
對于PNG圖像,可以分為索引(Index)圖和RGB圖兩種,索引圖只包含固定數(shù)量的顏色,而RGB圖的顏色數(shù)量是不受限制的。
索引圖:為節(jié)約存儲,把圖像中使用的顏色與一個顏色表對應起來,索引色常使用16色、32色、64色、128色或256色等,但最多不得超過256色;
RGB圖:的每一個象素都保存一個RGB值,代表這個象素的顏色,因此,一張RGB圖有多少個象素,文件中就保存多少個RGB值;

壓縮:
PNG采取的是LZ77無損數(shù)據壓縮算法:LZ77算法簡單來說就是通過使用編碼器或者解碼器中已經出現(xiàn)過的相應匹配數(shù)據信息替換當前數(shù)據從而實現(xiàn)壓縮功能。
最重要的還是線性過濾(也稱為“三角過濾”),PNG有5種過濾器,None(無過濾),Sub(當前值減去左側像素的值),Up(減去上方像素的值),Average(減去左側和上方像素的平均值)和Paeth(替換上方,左邊或者上方的左邊像素值,并重新以Alan Paeth命名)。下面只舉例其中之一的Up過濾:

png過濾2

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

掃描:
PNG的掃描方式很簡單,只存在兩種:非隔行掃描、Adam7(7遍隔行掃描方法)
Adam7(由Adam M. Costello開發(fā)的7遍隔行掃描方法),原理如下圖:

Adam7_passes

QQ圖片20130604153902

圖片示例:
Adam7_make_awesome_face

常用的兩種PNG優(yōu)化方法:
色調分離
優(yōu)化原理:有效的減少色彩數(shù),合并相似的顏色,創(chuàng)建出色調區(qū)域,更好的執(zhí)行“線性過濾”,得到高壓縮率。
缺點:這種方法有一定的局限性,尤其是優(yōu)化的圖片與 html 背景融合的情況下須慎用。
這里的色階值可根據實際情況設置:

QQ圖片20130528173159

優(yōu)化圖片對比:
原圖    原圖:212KB

色調分離    優(yōu)化后:146KB

圖層分離
有時候因為圖片中存在一些半透明像素,不得不保存一個“重量級”的PNG-24文件。如果將此類圖像一分為二,一部分是不透明像素,另一部分則為半透明,然后各以適當格式保存。
比如你可以用 PNG-24 格式保存半透明像素,而不透明像素則用 PNG-8 甚至 JPEG 格式保存。
例如:

ceshi3ceshi31

操作步驟:
1.在圖層面板中Ctrl+左鍵單擊圖層建立選區(qū);
2.切換至通道面板,將選區(qū)儲存為通道;
3.選擇該通道,取消選區(qū),將閾值(圖像 -> 調整 -> 閾值)調至255;
4.再次Ctrl+左鍵單擊該通道建立選區(qū)并隱藏該通道,然后選擇原始圖層,打開圖層 -> 新建 -> 通過剪切的圖層,即能得到上面兩幅分離后的圖片。
5.可再次對兩幅圖片進行色調分離等方法進行優(yōu)化。
此方法類似活動中背景圖過大時進行分割是為同一個道理,多增加一個請求而把圖片拆分,進行疊加。

3.GIF原理與優(yōu)化
由于GIF現(xiàn)在使用率偏低,除非需要用到GIF動畫,由于PNG本身是開發(fā)者為了代替GIF而衍生出的圖片格式,所以透明圖片建議采用PNG8。下面只簡單的介紹下GIF的原理:
GIF(Graphics Interchange Format)的原義是“圖像互換格式”,是CompuServe公司在 1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據,是一種基于LZW算法的連續(xù)色調的無損壓縮格式。其壓縮率一般在50%左右,它不屬于任何應用程序。GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像,如果把存于一個文件中的多幅圖像數(shù)據逐幅讀出并顯示到屏幕上,就可構成一種最簡單的動畫。

LZW壓縮算法
LZW就是通過建立一個字符串表,用較短的代碼來表示較長的字符串來實現(xiàn)壓縮,字符串和編碼的對應關系是在壓縮過程中動態(tài)生成的,并且隱含在壓縮數(shù)據中,解壓的時候根據表來進行恢復,算是一種無損壓縮。例如:
正常文本:好人經常說自己是好人,但是我確實是個好人。
壓縮文本:$1經常說自己是$1,但是我確實是個$1. $1=[好人]

文章已經接近尾聲了,相信經過這啰啰嗦嗦一大堆文字,大家對圖片優(yōu)化也會有一個相對清晰的思路了,期待能一起尋找探討更多的優(yōu)化方法。

參考資料:
書籍:JPG原理與數(shù)據檔案
PNG文件格式白皮書:http://www.w3.org/TR/REC-png.html
GIF文件數(shù)據結構:http://wenku.baidu.com/view/06eaedcdda38376baf1fae8e.html

[教程作者:admin]
免責聲明:本站文章系圖趣網整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/ps1622.html
[圖趣]告訴你PS CS6到底有啥好
網頁設計師應該知道的17個PS技巧
圖趣網微信
建議反饋
×