網(wǎng)頁設(shè)計技巧之png圖片優(yōu)化壓縮

2012/2/7 12:11:54來源：互聯(lián)網(wǎng)

做為一名網(wǎng)頁設(shè)計師你或許已經(jīng)對png格式非常熟悉，它提供了完整的透明度，這是一種無損的，功能強大的圖像格式。能夠很好代替gif圖像格式。但是絕大多數(shù)人認(rèn)為它不可被壓縮，帶著這樣的疑問我們來認(rèn)真看完下面這篇文章。每一種圖像格式都有自己的優(yōu)缺點，如果掌握了相關(guān)知識，在進行圖像優(yōu)化時能夠針對圖像進行相應(yīng)處理，得到高品質(zhì)的圖像和高壓縮率，這是圖像優(yōu)化的關(guān)鍵所在。png被稱為開源的gif圖像格式，它們之間有很多相同的地方（如：索引色），但png在每一個方面都要強于gif。它介紹了一些非常酷的功能，例如：圖像封裝和壓縮，但對我們網(wǎng)頁設(shè)計師來說最重要的還是線性過濾（也稱為“三角過濾”）。

什么是線性過濾？

這里介紹下它的原理，假如我們有一張5*5像素水平漸變的圖片，如下圖（每個數(shù)字代表了一種顏色）

通過上圖你會發(fā)現(xiàn)相同的顏色都是在垂直方向上擴展，而不是水平方向。這樣的圖片如果用gif格式將很難獲得高壓縮率，它只壓縮水平方向擴展的顏色（圖像尺寸越大，越能說明問題）。讓我們看看線性過濾是怎樣將這類圖像壓縮的：

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

在理想情況下，“Sub過濾”能提供更好的結(jié)果：

以數(shù)字1為標(biāo)識的每一行都經(jīng)過了“Sub過濾”，它發(fā)送信息給解碼器：“當(dāng)前像素提取左側(cè)像素的值，添加到當(dāng)前值”。例子中的值全為1，我想你大概也猜到這樣的數(shù)據(jù)肯定能被有效的壓縮。

線性過濾是非常重要的概念，尤其是在圖片處理時可以針對過濾特點進行處理以便得到更好的過濾效果。png有5種過濾器：None（無過濾），Sub（當(dāng)前值減去左側(cè)像素的值），Up（減去上方像素的值），Average（減去左側(cè)和上方像素的平均值）和Paeth（替換上方，左邊或者上方的左邊像素值，并重新以Alan Paeth命名）。

通過比較下面的圖片，我想大家應(yīng)該都能明白“線性過濾”的魅力所在。

gif：2568字節(jié)

png：372字節(jié)

圖片類型

png是一種存儲元數(shù)據(jù)信息的圖片類型。如果你是Photoshop用戶，你應(yīng)該已經(jīng)對png8（索引圖像）和png24（真彩色圖像）非常熟悉，如果你是 Fireworks用戶，或許已經(jīng)知道png32（真彩色透明圖像）。但是Photoshop的png24格式也能存儲真彩色透明圖像，其實這些命名都不是官方的，所以在png圖像格式說明面并不能找到這些概念，為了方便起見，在這次討論中我們采用Photoshop的命名方式。

png 可提供5種圖片類型：灰度，真彩色，索引色，帶alpha通道的灰度，帶alpha通道的真彩色。遺憾的是Photoshop只能導(dǎo)出3種圖像類型：帶透明的索引顏色，真彩色，帶透明度的真彩色。這就是為什么大家一直認(rèn)為Fireworks是png圖像最好處理工具。其實不然，F(xiàn)ireworks并沒有足夠的工具來處理導(dǎo)出的png圖像，它僅僅是在導(dǎo)出時做一些微小的優(yōu)化工作。

那還有沒有更好的png壓縮工具呢？答案是肯定的。OptiPNG和pngcrush都是非常有效的工具，從本質(zhì)上來看，這些工具主要做以下優(yōu)化：

1.選擇最合適的圖像類型（例如：如果圖像中沒有太多的顏色，真彩色圖像會被轉(zhuǎn)化為索引色圖像）
2.選擇最合適的過濾方式
3.選擇最合適的壓縮策略以及選擇性的減少顏色深度

所有這些操作都不會影響到圖像質(zhì)量，卻能減小 png 圖像文件的大小，所以我強烈建議您每次保存 png 圖像時都使用這些工具。

下面來介紹幾種處理圖像的方法，使圖片更好的執(zhí)行“線性過濾”。

1.色調(diào)分離

色調(diào)分離的優(yōu)化方法已經(jīng)廣為人知。在Photoshop中打開樣例圖片，點擊圖層面板中的”創(chuàng)建新的填充或調(diào)整圖層圖標(biāo)”，并選擇色調(diào)分離：

選擇盡可能小的數(shù)值（通常40就夠了）并保存圖片：

原圖：84K

壓縮后：53K

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

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

2.多余的透明

看看下面的圖片：

75K

30K

兩張圖片都是用 Photoshop 導(dǎo)出的，而且沒有經(jīng)過任何優(yōu)化。即使對比圖中的每個像素，你都不會發(fā)現(xiàn)它們之間存在任何區(qū)別。但是為什么前者居然是后者的2.5倍大？

在探尋奧秘之前，你必須安裝一個“Remove Transparency”的 Photoshop 插件才可以看到隱藏的細節(jié)。

在 Photoshop 中打開上面的兩張圖片，選擇 Filer -> Photo Wiz -> Remove Trasparency?，F(xiàn)在，你就可以看到保存在圖像中的真實像素信息了：

這是怎么回事？其實很簡單。帶alpha通道的真彩色圖像每個像素都用了4個字節(jié)來表示：RGBA。最后一個是alpha通道，控制該像素透明度：值為0則完全透明，255則完全不透明。這意味著每一個像素（任何RGB值）只要alpha值設(shè)為0就可以完全隱藏。但是這些RGB數(shù)據(jù)仍然存在，而且它不利于png編碼器對數(shù)據(jù)流進行有效的封裝和編碼。因此，我們必須在導(dǎo)出圖像前刪除這些隱藏數(shù)據(jù)（例如上圖中填充的黑色）。下面是一個比較便捷的方法：

1.在Photoshop中打開上面例子中第一張圖片；
2.Ctrl+單擊（Mac系統(tǒng)中為？+單擊）圖層面板中的縮略圖，建立選區(qū) -> 單擊選擇欄目 -> 選中反向。
3.切換到快速蒙版模式，按Q鍵：
4.我們已經(jīng)建立了一個半透明圖像的蒙版，但我們只需要完全透明的圖像。圖像 -> 調(diào)整 -> 閾值，并將閾值色階滑到最右端，從而使選區(qū)完全透明：
5.退出快速蒙版模式（按Q鍵），并用黑色填充選區(qū)：
6.再次反選（選擇 -> 反向），點擊圖層面板的“添加蒙版”圖標(biāo)，添加蒙版。