jpeg 優(yōu)化技巧
當人們討論圖像優(yōu)化時，他們只注意到一些流行軟件提供的那幾個僅有的參數(shù)調(diào)節(jié)工具，例如“質(zhì)量”滑塊，顏色數(shù)調(diào)板，抖動等。此外，少數(shù)專門的軟件，如optipng和jpegtran，設(shè)法壓縮一些多余的數(shù)據(jù)來優(yōu)化圖像。所有這些都是非常有名的工具，它們?yōu)?span id="6awe2wmou" class="t_tag" href="tag.php?name=%cd%f8%d2%b3">網(wǎng)頁開發(fā)者和
設(shè)計師提供簡單直接的方法來優(yōu)化圖像。
在本文中，我們會向您展示一種不同的方法來優(yōu)化圖像，這種方法是源于“圖像數(shù)據(jù)在不同圖片格式中的儲存原理”。我們從jpeg格式開始，這里有個基礎(chǔ)技術(shù)稱“8
像素柵格” (原文：eight-pixel grid )
eight-pixel grid
就如你已知的，jpeg圖像由一系列8px × 8px區(qū)塊組成，當您吧jpeg的圖像質(zhì)量調(diào)的太低的時候，這些區(qū)塊尤其明顯。這些東西如何幫助我們優(yōu)化我們的圖像呢？請觀察下面的例子：
32x32 px, 圖片質(zhì)量:10（ps中），396 bytes
兩個白色小方塊都是8x8 px。雖然都是低質(zhì)量，但右下角看起來失真更加的嚴重了（正如您預料的一樣），而左上角的卻非常的干凈。這是怎么回事？要回答這個問題，我們需要看看這個襯在網(wǎng)格下的圖像：
正如你看到的，左上角的小方塊正好對齊在“eight-pixel grid”，這樣就確保小方塊保持是銳利。
當保存的時候，圖片會被分成許多的8x8 px的區(qū)塊，而軟件是對每一個區(qū)塊進行獨立優(yōu)化的。由于右下方的方塊并不匹配這些區(qū)塊（也就是這個方塊跨越了幾個區(qū)塊，正好落于區(qū)塊的交接線上），優(yōu)化器在尋找索引的時候就會在黑色和白色之間尋找平衡（在jpeg里，每一個8x8 px的區(qū)塊都是依據(jù)正弦算法來進行編碼的
原句：in jpeg, each 8×8 block is encoded as a sine wave）。這就解釋了失真的原因了。許多專門的jpeg優(yōu)化軟件都有選擇性優(yōu)化的功能，它能根據(jù)圖像的不同區(qū)域設(shè)置不同的優(yōu)化質(zhì)量，以達到保留更多圖像信息的目的。
這項技術(shù)對在保存含有有矩形圖形的圖片時尤其有效。我們一起來看看在實際中是怎樣應(yīng)用的：
13.51 kb.
12.65 kb.
在第一個圖像里，微波爐的位置是隨機的，在保存第二個文件之前，我們把圖像按照eight-pixel grid來對齊。質(zhì)量一樣都設(shè)置在55。讓我們把圖像放大看看（紅線標示出區(qū)塊的邊界）
正如你看到的一樣，我們只是調(diào)整好圖片的位置就已經(jīng)縮小了1kb的空間。當然，我們也把圖片變得“干凈”了！
優(yōu)化顏色
這項技術(shù)相當復雜而且僅適用于某些類型的圖像，不過我們會繼續(xù)下去，我們只是學習它的道理。
首先，我們需要知道jpeg使用哪一種顏色模式。大多數(shù)的圖片格式都是使用rgb顏色模式，但jpeg格式也可以是ycbcr，這是一種廣泛用于電視的顏色模式。rgb類似于hsv模式（大多數(shù)
設(shè)計師都熟悉hsv模式）。hsv由三部分組成，色彩（h），純度（s），明度（v）。其中在這里最重要的就是明度（也稱為亮度），優(yōu)化圖像的時候通常是壓縮顏色通道，但盡可能保持高亮的亮度通道，因為人們對它最為敏感。photoshop有一個叫l(wèi)ab的顏色模式，這有助于我們對圖像做出預處理，以便使jpeg優(yōu)化有更好的效果。
我們繼續(xù)使用微波爐來作為我們的例子。在微波爐的門上有一層很小的網(wǎng)紋，這是一個很好的例子來演示我們的優(yōu)化顏色方法。經(jīng)過一個簡單的壓縮后，圖像質(zhì)量調(diào)節(jié)到55，文件體積是64.39kb。
990×405 px, 圖像質(zhì)量: 55 (ps中), 64.39 kb.
瀏覽大圖.
在photoshop中打開上面的大圖，然后轉(zhuǎn)換成lab模式：圖像>>圖像>>lab顏色。
lab模式與hsv或ycbcr非常接近，但不完全相同。亮度通道包含了圖像里的亮度信息。a通道顯示了圖像包含了多少的紅色和綠色信息，而b通道則控制圖像的黃色和藍色部分。盡管有些區(qū)別，但這個顏色模式使我們避免了很多多余的顏色信息。
轉(zhuǎn)到通道面板，查看a通道和b通道，這時候我們很明顯能夠看到網(wǎng)紋的紋理，并且我們能看到它是由三種不同亮度的色塊組成的。
.
我們繼續(xù)做一些顏色上的優(yōu)化，為了保留原來的文件，先復制一份，這樣在一個獨立的窗口里編輯會非常有用。我們的目的在兩個顏色通道里是光滑這些顆粒狀的紋理。這樣就能有更多簡化的數(shù)據(jù)來讓優(yōu)化器處理了。你可能會奇怪為什么我們選擇這樣的一塊區(qū)域（微波爐的門）來處理呢？很簡單，因為這個部分是由黑色像素和橙色像素相間而成的。黑色意味著0亮度，這個信息已經(jīng)被保留在了亮度通道里了。所以～如果我們在顏色通道里將這個區(qū)域完全變?yōu)槌壬?，我們將不會損失任何的信息。因為亮度通道決定了那些像素應(yīng)該是黑色的，而在這樣的紋理上，純黑色和暗橙色則顯得十分的含糊。（這里的意思大概是在亮度通道中的對比更強一些，容易看清楚）
轉(zhuǎn)換到a通道，單獨選擇每一區(qū)塊，為每個區(qū)塊分別應(yīng)用：濾鏡>>雜色>>中間值，半徑應(yīng)該盡可能的?。ㄖ钡郊y理消失為止），這樣不會損失太多的眩光效果。在此圖中，第1區(qū)塊半徑應(yīng)調(diào)節(jié)成4，第2區(qū)塊為2，然后第3區(qū)塊調(diào)節(jié)成4。現(xiàn)在，這個門看起來應(yīng)該是這樣的：
瀏覽大圖.
現(xiàn)在，圖片的飽和度比較低，我們需要去改善它。為了使顏色的變化能夠?qū)崟r地顯示出來，所以這里我們復制一個活動窗口：窗口>>排列>>新建窗口。在新的窗口里，點擊lab通道查看圖片，現(xiàn)在你的工作界面應(yīng)該像下面這樣了：
右邊的是原始的圖像，左邊的是復制出來的副本，底下的是工作現(xiàn)在的工作空間。
在a通道里把三個區(qū)塊都選擇上，打開色階窗口（ctrl+l 或 圖像>>調(diào)整>>色階）。將中間的滑塊向左邊移動，這樣副本里的微波爐的顏色就和原始的圖像非常接近了（這里我把中間的滑塊移到1.08的位置）。b通道進行同樣的處理，現(xiàn)在的效果應(yīng)該是這樣的：
990×405 px, 圖像質(zhì)量: 55 (ps中), 59.29 kb
瀏覽大圖
正如你所見，我們又減少了5 kb的大?。ㄖ笆?4.39 kb）。雖然這項技巧看似非常得復雜麻煩，但是它僅需要你用上一分鐘就能完成：轉(zhuǎn)換到lab顏色模式，選擇顏色通道里的不同部分應(yīng)用中間值濾鏡，然后做一些飽和度修正。如前面說的一樣，這個技巧比它的理論更來的有用，我常常使用這個技巧來調(diào)整一些大型廣告圖片，使他們看起來干凈而銳利。
常規(guī)的jpeg優(yōu)化技巧
本文將以以下的jpeg優(yōu)化技巧作為尾聲。
每次你選擇壓縮圖片的時候，請仔細選擇你的壓縮軟件，jpeg標準非常嚴格的，它只決定如何在轉(zhuǎn)換的時候減少圖片的體積，而軟件的開發(fā)商卻決定了該怎樣正確利用jpeg優(yōu)化器。（這里的意思大概是每個軟件的優(yōu)化算法都不同）
例如，有些商家使他們的軟件做出做大程度的優(yōu)化，允許您將文件壓縮到很小的體積但依然保持高質(zhì)量的設(shè)置，而photoshop則保存出來一個比這個大了一倍的文件。不要依賴這樣的軟件，每個軟件都有他們的價值觀來決定哪些信息是有用的，他們會根據(jù)這些標準來設(shè)定他們的優(yōu)化算法。
唯一的判定標準是圖像的質(zhì)量和圖像大小之間的比。如果你在photoshop中保存一個質(zhì)量55到60的文件，它可能跟在其他軟件里把質(zhì)量設(shè)置在80的時候輸出的質(zhì)量和體積差不多。
不要保存質(zhì)量為100的圖片。這個并不是最高質(zhì)量的圖片，只是一個數(shù)值上的優(yōu)化底線，最終你會得到一個不合理的大文件。事實上把質(zhì)量設(shè)置在95以上就已經(jīng)足以防止丟失信息了。
記住，當你在photoshop中把質(zhì)量設(shè)置低于50的時候，它就會執(zhí)行另一個叫做“降色采樣（原文：color down-sampling）”的優(yōu)化算法，它會在8個像素周圍平均采樣，這樣會在邊緣產(chǎn)生雜色：
48×48 px, 圖像質(zhì)量: 50 (ps中), 530 bytes.
48×48 px, 圖像質(zhì)量: 51 (ps中), 484 bytes.
因此，如果圖片很小而且對比很大，建議在photoshop中不要設(shè)置質(zhì)量低于51。
在以后的文章里，我們將繼續(xù)講解一些png格式的壓縮技巧。
