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

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

什么是線性過濾？

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

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

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

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

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

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

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

gif：2568字節(jié)

png：372字節(jié)

圖片類型

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

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

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

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

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

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

1.色調(diào)分離

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

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

原圖：84K

壓縮后：53K

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

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

2.多余的透明

看看下面的圖片：

75K

30K

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

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

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

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

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

對(duì)于上述這些操作我們只須了解即可，因?yàn)閜ng二次壓縮工具內(nèi)已經(jīng)內(nèi)置了該項(xiàng)操作。