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

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

3.透明分離

有時候因為圖片中存在一些半透明像素，你不得不保存一個“重量級”的PNG-24文件。如果將此類圖像一分為二，一部分是不透明像素，另一部分則為半透明，然后各以適當(dāng)格式保存。比如你可以用 PNG-24 格式保存半透明像素，而不透明像素則用 PNG-8 甚至 JPEG 格式保存。這樣操作下來在實際應(yīng)用中你將會節(jié)省很大的圖片流量。看一下實際案例：

PNG24 62K

1.在圖層面板中 Ctrl+單擊（或？+單擊）圖像縮略圖建立選區(qū)；
2.在通道面板中選擇“將選區(qū)存儲為通道”；
3.取消（Ctrl+D 或？+D）選區(qū)，選擇新建的通道，然后打開閾值（圖像 -> 調(diào)整 -> 閾值）。將滑塊盡量向右拖動；
4.我們已經(jīng)為不透明的像素創(chuàng)建了蒙版?，F(xiàn)在利用這個蒙版來分離原始圖層。Ctrl+單擊（或？+單擊）alpha1通道，轉(zhuǎn)到圖層面板，選擇原始圖層層，打開圖層 -> 新建 -> 通過剪切的圖層。這樣我們就分離出了不透明和半透明像素。現(xiàn)在你需要將這兩個文件分別存儲為不同的文件格式：不透明像素保存為 PNG-8，半透明像素保存為 PNG-24。針對半透明像素圖層你還可以使用色調(diào)分離技術(shù)讓文件變得更小。
PNG-8 17KBPNG-24 色調(diào)分離（色階=35） 6KB

最終對比結(jié)果：

原圖：63K

優(yōu)化后：23KB

優(yōu)化后的圖片大小幾乎只有原圖的1/3，在原來的基礎(chǔ)上能夠節(jié)省2/3的流量。但是這種方法有一個明顯的缺點(diǎn)：將一個圖片分成兩個圖片，增加了重構(gòu) 人員的工作量，減少圖片大小的同時卻又增加了http連接數(shù)。

這里只是介紹些優(yōu)化方法，在實際應(yīng)用中請大家多去嘗試，發(fā)現(xiàn)不同方法的應(yīng)用規(guī)律，總結(jié)出來大家一起分享！ 在原文中Sergey Chikuyonok提到還會有第二部分的內(nèi)容，將進(jìn)一步探討更高層次的技術(shù)，會談到灰度模式的圖像，使用更少的顏色，降低細(xì)節(jié)，并討論進(jìn)一步優(yōu)化png 的小技巧，以及png優(yōu)化的實例。讓我們一起期待下一篇大作。

接著上一篇我們繼續(xù)分享Sergey Chikuyonok帶來的PNG優(yōu)化技巧，雖然在原文的評論中也看到一些人認(rèn)為何必花這么多時間去做這樣的優(yōu)化工作，我還是那句話做為一個頁面重構(gòu)人員，圖片優(yōu)化是與我們息息相關(guān)的，業(yè)界的最新知識我們必須掌握，至于在項目中怎么去應(yīng)用要靠個人判斷。

灰度

Photoshop 不能保存灰度模式的 PNG 文件，所以你得在保存黑白圖像后再使用 OptiPNG，代碼如下：

optipng -o5 bw-image.png

灰度圖像占用的空間遠(yuǎn)小于 RGB 圖像，因為每個像素只用一個字節(jié)來表示，而不是三個：

PNG-24（Photoshop → 真彩色），8167字節(jié)

PNG-24（Photoshop + OptiPNG → 灰度），6132字節(jié)

在保存圖像為 PNG 文件之前，將其設(shè)置為灰度模式（圖像 → 模式 → 灰度）非常重要，尤其是半透明圖像（參見 Dirty transparency 的方法）。

減少顏色

這個方法可以作為色調(diào)分離的替代方案。色調(diào)分離會嚴(yán)重改變圖像的色彩，如果你要將圖像嵌在網(wǎng)站背景中的話，這根本不可接受。這種方法能讓你控制顏色更加自如，但也是限制在256色以內(nèi)。

這個方法主要是從半透明圖像中提取圖像信息（即刪除透明度），將其轉(zhuǎn)換為索引顏色再應(yīng)用到原始蒙版中。減少顏色數(shù)量利于文件的有效壓縮。

1.在 Photoshop 中打開并且復(fù)制原始圖像（圖像 → 復(fù)制）。

63KB

2.從復(fù)制的圖像中刪除透明（濾鏡 → Photo Wiz → Remove Transparency）：

3.設(shè)置圖像模式為索引顏色（圖像 → 模式 → 索引顏色）。在新對話窗口中輸入如下設(shè)置：

顏色：190 ，
仿色：擴(kuò)散，
數(shù)量：80％。

4.圖像模式設(shè)置回 RGB 顏色，并復(fù)制圖層到原始文件中。將復(fù)制的圖層對齊，并創(chuàng)建剪貼蒙版?，F(xiàn)在保存為 PNG-24 文件：

51KB

如你所見，做些簡單的步驟就可以節(jié)省下11KB，而且還沒有任何質(zhì)量損失。甚至這種方法還有一個好處：使用 OptiPNG 時能夠獲得更高的壓縮率。而對于這張圖像，它的大小被從51KB減小到33KB，壓縮了36％。你可以保存為 Web 格式的文件并應(yīng)用 Influence mask 來減低大小，而不必把圖像轉(zhuǎn)為索引顏色模式。

但是這種方法并不等同于在 Fireworks 中的調(diào)整 PNG-8 的透明度。在多數(shù)情況下，即使顏色數(shù)減少了，但仍會超過256色，所以你必須保存圖片為 PNG-24，而非 PNG-8。要記住，不透明的紅色和透明50%的紅色是完全不同的兩種顏色。

降低細(xì)節(jié)

這項技術(shù)對于優(yōu)化陰影、倒影、發(fā)光等非常好用。記得在 Dirty transparency 中講到，真彩色圖像中的每個像素都用了四個字節(jié)來描述：RGBA。最后一個控制像素的透明度。對于 Alpha 值太低的像素（即像素只是勉強(qiáng)可見），你就可以替換 RGB 數(shù)據(jù)以取得更好的壓縮效果。讓我們試試吧。

1.再次在 Photoshop 中打開復(fù)古 iPod。

63KB

2.iPod 下方的倒影就是非常好的優(yōu)化對象。Ctrl+單擊或 ?+點(diǎn)擊圖層面板中的縮略圖創(chuàng)建選區(qū)。到通道面板從選區(qū)創(chuàng)建新的通道：

3.我們必須選中那些勉強(qiáng)可見的像素。反相該通道（圖像 → 調(diào)整 → 反相），然后打開閾值對話框（圖像 → 調(diào)整 → 閾值）。設(shè)置閾值為170就足夠了：

4.這樣我們就得到了只包括勉強(qiáng)可見的像素的蒙版。Ctrl+單擊或 ?+單擊通道創(chuàng)建選區(qū)。返回圖層面板，選擇圖像圖層，打開濾鏡 → 雜色 → 中間值。這個濾鏡將平滑選區(qū)中的像素，也就是說更利于壓縮。設(shè)置半徑為5：

現(xiàn)在存儲圖像為 Web 所用格式，PNG-24，文件大小已經(jīng)從63KB減小為59KB了。你可以調(diào)整閾值和中間值，在提高壓縮率與保存更多細(xì)節(jié)間平衡。

其它 PNG 的使用和優(yōu)化技巧

1.每次優(yōu)化都必須先徹底分析圖像。再選用最合適的優(yōu)化技術(shù)。

2.自主創(chuàng)新。以這些技術(shù)為基礎(chǔ)，研究你自己的優(yōu)化方法。

3.許多人認(rèn)為，對于顏色較少的圖像，PNG-8 總比 PNG-24 更適用。但是他們錯了。有時候，PNG-24 反而更?。?/span>

PNG-8，833字節(jié)

PNG-24，369字節(jié)

在這張圖像中，PNG-8 額外占用了空間：3個字節(jié)是用來描述顏色板中的像素，另外再用1個字節(jié)來描述圖像數(shù)據(jù)流中的像素，而 PNG-24 總共只需要3個字節(jié)來描述。因此，如果圖像顏色數(shù)較低，也沒有透明，那么就該測試下 PNG-8 和 PNG-24 哪個更小。

4.如果您使用的是舊版本的 Photoshop（低于 CS3 ），你可能會發(fā)現(xiàn)，圖像在圖像編輯器與在網(wǎng)頁瀏覽器中看起來不一樣。這是因為 PNG 文件中存有伽瑪值，可以控制圖像的伽瑪校正。（關(guān)于伽瑪?shù)南嚓P(guān)內(nèi)容，可以參考這篇文章——譯注）你可以放心地將其刪除，用 TweakPNG （僅 Windows 下）或 smush.it 都能做到。

5.有一種“特殊的” PNG 圖像格式，可以在支持半透明的情況下，以索引顏色的 PNG-8 保存。Photoshop 不能保存這種圖像（Fireworks 則可以），但可以先在 Photoshop 中編輯，然后再用 OptiPNG 轉(zhuǎn)換。

OptiPNG 默認(rèn)會將少于256色的真彩色圖像（24位）轉(zhuǎn)換成8位色。這么做的話，可以先應(yīng)用“減少顏色”和“降低細(xì)節(jié)”技術(shù)，再“猜測”圖像的顏色數(shù)。不過這樣非常費(fèi)時。PNGGNQ 工具可以將真彩色圖像轉(zhuǎn)為256色，但這樣你就不能完全掌控圖像了。

你必須減少顏色數(shù)到256色以下，包括半透明像素在內(nèi)。這種格式之所以“特別”，因為它在 IE6 下會：

IE6