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

3.透明分離

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

PNG24 62K

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

最終對(duì)比結(jié)果：

原圖：63K

優(yōu)化后：23KB

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

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

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

灰度

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

optipng -o5 bw-image.png

灰度圖像占用的空間遠(yuǎn)小于 RGB 圖像，因?yàn)槊總€(gè)像素只用一個(gè)字節(jié)來(lái)表示，而不是三個(gè)：

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

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

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

減少顏色

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

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

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

63KB

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

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

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

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

51KB

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

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

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

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

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

63KB

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

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

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

現(xiàn)在存儲(chǔ)圖像為 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)為，對(duì)于顏色較少的圖像，PNG-8 總比 PNG-24 更適用。但是他們錯(cuò)了。有時(shí)候，PNG-24 反而更小：

PNG-8，833字節(jié)

PNG-24，369字節(jié)

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

4.如果您使用的是舊版本的 Photoshop（低于 CS3 ），你可能會(huì)發(fā)現(xiàn)，圖像在圖像編輯器與在網(wǎng)頁(yè)瀏覽器中看起來(lái)不一樣。這是因?yàn)?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)會(huì)將少于256色的真彩色圖像（24位）轉(zhuǎn)換成8位色。這么做的話，可以先應(yīng)用“減少顏色”和“降低細(xì)節(jié)”技術(shù)，再“猜測(cè)”圖像的顏色數(shù)。不過(guò)這樣非 常費(fèi)時(shí)。PNGGNQ 工具可以將真彩色圖像轉(zhuǎn)為256色，但這樣你就不能完全掌控圖像了。

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

IE6

其他瀏覽器

你也看到了，IE6 只顯示不透明像素。這種格式的好處是你可以使用標(biāo)準(zhǔn)的 <img> 標(biāo)簽，或把圖片作為背景（即不使用巨耗資源的 AlphaImageLoader CSS 濾鏡），但代價(jià)是 IE6下 的視覺(jué)效果非常糟糕。

6.不要使用“另存為”保存應(yīng)用在網(wǎng)頁(yè)上的 PNG 圖像，而應(yīng)該使用“存儲(chǔ)為 Web 所用格式”。默認(rèn)情況下，Photoshop 會(huì)將預(yù)覽連同圖像一起保存，這樣文件就會(huì)稍大一些。