網(wǎng)頁設(shè)計(jì)技巧之png圖片優(yōu)化壓縮
做為一名網(wǎng)頁設(shè)計(jì)師你或許已經(jīng)對png格式非常熟悉,它提供了完整的透明度,這是一種無損的,功能強(qiáng)大的圖像格式。能夠很好代替gif圖像格式。但 是絕大多數(shù)人認(rèn)為它不可被壓縮,帶著這樣的疑問我們來認(rèn)真看完下面這篇文章。每一種圖像格式都有自己的優(yōu)缺點(diǎn),如果掌握了相關(guān)知識,在進(jìn)行圖像優(yōu)化時(shí)能夠 針對圖像進(jìn)行相應(yīng)處理,得到高品質(zhì)的圖像和高壓縮率,這是圖像優(yōu)化的關(guān)鍵所在。png被稱為開源的gif圖像格式,它們之間有很多相同的地方(如:索引 色),但png在每一個(gè)方面都要強(qiáng)于gif。它介紹了一些非??岬墓δ?,例如:圖像封裝和壓縮,但對我們網(wǎng)頁設(shè)計(jì)師來說最重要的還是線性過濾(也稱為“三 角過濾”)。
什么是線性過濾?
這里介紹下它的原理,假如我們有一張5*5像素水平漸變的圖片,如下圖(每個(gè)數(shù)字代表了一種顏色)
通過上圖你會(huì)發(fā)現(xiàn)相同的顏色都是在垂直方向上擴(kuò)展,而不是水平方向。這樣的圖片如果用gif格式將很難獲得高壓縮率,它只壓縮水平方向擴(kuò)展的顏色 (圖像尺寸越大,越能說明問題)。讓我們看看線性過濾是怎樣將這類圖像壓縮的:
以數(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ù)肯定能被有效的壓縮。
線性過濾是非常重要的概念,尤其是在圖片處理時(shí)可以針對過濾特點(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)對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.選擇最合適的圖像類型(例如:如果圖像中沒有太多的顏色,真彩色圖像會(huì)被轉(zhuǎn)化為索引色圖像)
- 2.選擇最合適的過濾方式
- 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)化。即使對比圖中的每個(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編碼器對數(shù)據(jù)流進(jìn)行有效的封裝和編碼。因此,我們必須在導(dǎo)出圖像前刪除這些隱藏?cái)?shù)據(jù)(例如上圖中填充的黑色)。下面是一個(gè)比較便捷的方法:
- 1.在Photoshop中打開上面例子中第一張圖片;
- 2.Ctrl+單擊(Mac系統(tǒng)中為 ?+單擊)圖層面板中的縮略圖,建立選區(qū) -> 單擊選擇欄目 -> 選中反向。
- 3.切換到快速蒙版模式,按Q鍵:
- 4.我們已經(jīng)建立了一個(gè)半透明圖像的蒙版,但我們只需要完全透明的圖像。圖像 -> 調(diào)整 -> 閾值,并將閾值色階滑到最右端,從而使選區(qū)完全透明:
- 5.退出快速蒙版模式(按Q鍵),并用黑色填充選區(qū):
- 6.再次反選(選擇 -> 反向),點(diǎn)擊圖層面板的“添加蒙版”圖標(biāo),添加蒙版。
對于上述這些操作我們只須了解即可,因?yàn)閜ng二次壓縮工具內(nèi)已經(jīng)內(nèi)置了該項(xiàng)操作。
本文地址:http://pkvc.cn/tutorial/ps1036.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏