9.28日(rì)音(yīn)δ≤≤∞訊,網頁圖片無損壓縮技(jì)巧詳談。如(rú)果圖片優化£♣≈(huà)得(de)好(hǎo)，不(bù≈')但(dàn)可(kě)以提高(gāo)頁面™☆≥的(de)加載速度，提升網站(zhàn)的(deφ×∞)用(yòng)戶體(tǐ)驗，而且還(®↔↔§hái)可(kě)以通(tōng)過圖片優化(h✘↑uà)來(lái)節省網站(zhàn)的(de)帶寬。那(nà)麽作(§↓¥zuò)為(wèi)頁面構建工(gōng)程師(shī)應該采用(yòng)'₽什(shén)麽方法來(lái)優化(huà)圖片，β€>既能(néng)保證UI的(de)還(há₽÷★≠i)原度，又(yòu)使圖片最精簡呢(ne≥α α)？下(xià)面我就(jiù)個(gè)人(ré✔¶←n)經驗，來(lái)簡單介紹一(yī)下(xià)圖片β♥優化(huà)的(de)方法，首先我們了(leδ)解一(yī)些(xiē)圖片方面的(d ¥e)知(zhī)識：
1.矢量圖與位圖。
矢量圖：縮放(fàng)、旋轉不(bù)失真的( ↕de)圖像格式，不(bù)管你(nǐ)離(lí)多(du∞•®ō)近(jìn)去(qù)看(kàn)都(dōu)看(kàn)不λπ☆∞(bù)到(dào)圖形的(de)最小(xi♥ǎo)單位。存儲的(de)文(wén)件(jiàn)λλ較小(xiǎo)，但(dàn)是(shì)很¶≠(hěn)難表現(xiàn)色彩層次豐富 ↔≠'的(de)逼真圖像效果。你(nǐ)可(kě)以理(lǐ)解成完美(měi)的↑≠(de)圓型、抛物(wù)線等形狀。
位圖：又(yòu)叫栅格圖、像素圖，最小(xiǎo)單位由像素¶π構成，縮放(fàng)、旋轉會(huì)失真。→÷♣舉個(gè)例子(zǐ)來(lái)說(s®εhuō)，位圖就(jiù)好(hǎo)比十字繡，遠(yuǎn)看(kà"n)時(shí)畫(huà)面細膩多(duō)彩，近(j ∞λìn)看(kàn)時(shí)能(néng)看(kàn)到(★♥ dào)每一(yī)針的(de)色彩過渡。
十字繡十字繡放(fàng)大(dà)
下(xià)表為(wèi)矢量圖和(hé)位圖的(de)對(↓✔≥✘duì)比：
2.有(yǒu)損壓縮、無損壓縮。
有(yǒu)損壓縮：特點是(shì)保持顔色的(de)逐漸≤γ變化(huà)，根據人(rén)眼觀察現(xià≥→☆n)實世界的(de)突然變化(huà),然後使用(yòng)附近(jìn)δΩ♥ 的(de)顔色通(tōng)過漸變或其他(tā)形式進行(xíng)填充。因•↑¥為(wèi)素點的(de)數(shù)據信息，所₽γ"以存儲量會(huì)降低(dī)，還(hái)不(bù)×₩ 會(huì)影(yǐng)響圖像的(de)還(hái)原度質會(huì)有(≥↓yǒu)所下(xià)降。JPG是(shì)有≠¥(yǒu)損壓縮格式，在存儲圖像時(shí)會(huì)φ♦把圖像分(fēn)解成8*8像素的(de)♣>↔網格單單獨優化(huà)。舉個(gè)例子(zǐ)：白(bái)色小☆¥∏≤(xiǎo)塊為(wèi)8*8px，黑(hē↔®&i)色底色塊為(wèi)32*32px，當小(♠•≤↓xiǎo)白(bái)塊已經不(bù)是(shì)純白(bái)色了($€♦le)，它周圍的(de)小(xiǎo)白(bái)塊卻很(hěn)尖銳，如(φ✘→rú)下(xià)圖所示：
右上(shàng)角的(de)白(bái)色★ε<格子(zǐ)剛好(hǎo)沒有(yǒu)在8*8像素的(de)網格單元β÷✘€中，所以保存時(shí)會(huì)跟周圍的(de)8*8的(de≥★)網格單元顔色融合，下(xià)圖的(de)效果：
這(zhè)就(jiù)是(shì)平時"↓÷(shí)保存JPG圖片時(shí)圖像會(huì)模糊₹β¥γ的(de)原因，下(xià)面是(shì)幾張彩色圖的(de)局部對(≤↕✘duì)比效果：
無損壓縮：利用(yòng)數(shù) 據的(de)統計(jì)冗餘進行(xíng)©×壓縮，真實的(de)記錄圖像上(shàn±♠♠"g)每個(gè)像素點的(de)數(shù)據信息。他(t♦↓ā)的(de)原理(lǐ)是(shì)先判斷哪些(xiēΩλ')顔色相(xiàng)同，哪些(xiē)不(b₽®ù)同，将相(xiàng)同顔色的(de)數(shù)據信息進行(xíng)£↑壓縮記錄，把不(bù)同的(de)數(shù)據另外(wài)保存。多§£β(duō)次存儲後圖片的(de)品質不(b♣ ù)會(huì)下(xià)降。
為(wèi)什(shén)麽無損壓縮的(de)圖也(yě)會×λ(huì)有(yǒu)失真的(de)？因為(wèiλ÷)他(tā)的(de)壓縮原理(lǐ)是(shì)通(tōng)過索引圖像€π上(shàng)相(xiàng)同區(qū)域的(d&σe)顔色進行(xíng)壓縮和(hé)還(hái)原，也(yě)就(ji♥≤<₩ù)是(shì)說(shuō)隻有(yǒu)在圖像的(de)顔色數(sh ☆ù)量小(xiǎo)于我們可(kě)以保存γ←的(de)顔色數(shù)量時(shí)，才能↓£₽(néng)真實的(de)記錄和(hé)還(hái)原圖像，否則就(jiù≈™φ§)會(huì)丢失一(yī)些(xiē)圖像信息。例如(rú)₹₽★，PNG-8和(hé)GIF格式：
而PNG24為(wèi)真彩色所以顔色表為(± ≠♥wèi)空(kōng)，不(bù)會(huì)失真。
3.PNG、GIF、JPG圖片對(duì)比。
在我們進行(xíng)圖像優化(huà)技(∞£jì)術(shù)前，需要(yào)學習(xíγ')有(yǒu)關的(de)圖片格式的(de)一(yī)些(xiē)技♥↔(jì)術(shù)細節。每個(gè)圖形格€↓§₹式都(dōu)有(yǒu)自(zì)己的(de)優勢和(h₽δ$™é)弱點，知(zhī)道(dào)他(tā)們會(huì)使你(nǐ)得₹α(de)到(dào)更好(hǎo)的(de)視(shì)覺質量和♥¶₹α(hé)壓縮品質。
網頁圖片優化(huà)是(shì)網頁加速中非常重要(yào)的↑σ (de)一(yī)步，對(duì)圖片進行(xíngεφ←∑)壓縮，不(bù)僅能(néng)夠節約帶寬，并且加快(kuàσσ$☆i)網頁的(de)速度。我們常用(yòng)的(de)≈ 圖片編輯軟件(jiàn)都(dōu)可(kě)以☆±✘在壓縮圖片。
PNG-8的(de)高(gāo)壓縮比♦≈
切圖時(shí)，有(yǒu)時(shí)選擇PNG-8可(kě₹★)以獲得(de)更高(gāo)的(de)壓縮比。注意，是(s↓↑®'hì)PNG-8，不(bù)是(shì)PNG-24。不(b &ù)過有(yǒu)些(xiē)情況下(xià)還(hái)是(shì✔λ↔)GIF或JPG會(huì)小(xiǎo$ β≈)一(yī)些(xiē)，需要(yào)根據實際情₩£♠∏況調試以選擇最佳方案。
PNG-24的(de)優化(huà)技(jì)巧，使用(yòng)σ₹色調分(fēn)離(lí)：
拿(ná)微(wēi)博左側導航的(de)小(xiǎo)icon為(w∑èi)例，壓縮後的(de)圖像大(dà)小(xiǎo)對(duì)比±↕♣•如(rú)下(xià)圖：
PS色調分(fēn)離(lí)的(de)操作(zuò)步驟如≈$≤(rú)下(xià)：
對(duì)比大(dà)小(xiǎo)：
使用(yòng)工(gōng)具優化(huà)後，↔₩ <還(hái)能(néng)夠小(xiǎo)一(yī¶≈)些(xiē)：
圖片優化(huà)在微(wēi)博首頁上(shàng•£)的(de)應用(yòng)：
1.圖型類、照(zhào)片類
對(duì)于圖像格式的(de)選擇，我們還(háiε")需要(yào)考慮圖片的(de)使用(yòng)場<∞©λ(chǎng)景或功能(néng)，概括為(wèi)兩類：圖型類、照ש✘(zhào)片類
圖型類：圖形符号，具有(yǒu)高(gāo)度濃φ≤"縮并快(kuài)捷傳達信息、便于記憶的(de)特性，顔色數÷π(shù)量較少(shǎo)。
圖型類一(yī)般可(kě)以使用(yòng)PNG格式或者G'γ$IF格式。優化(huà)時(shí)可(kě)采用(yφ₽•òng)PNG格式為(wèi)PNG8或者PNG24，品質為(w ↑èi)32，如(rú)果色彩有(yǒu)損失可(kě)采用(yòng)品質 ∞64或者128。
例如(rú)：首頁左導的(de)圖标、feed區(qū)圖标、Ω∑勳章(zhāng)圖、表情動畫(huà)都(dōu)屬于圖形。
照(zhào)片類：照(zhào)片通(tōng)常含有(yǒu)§₽₽∑百萬數(shù)量級的(de)顔色，包括平滑的(de)顔色過度和(hé≥φ)漸變，如(rú)果是(shì)圖形較為>₩(wèi)複雜(zá)，圖中有(yǒu)時(shí)會(huì₽↕αε)出現(xiàn)真實的(de)照(zhào)片。 ↔
照(zhào)片類一(yī)般用(yòng)PNG和(hé)JPG。÷•可(kě)以根據圖片色彩的(de)豐富程度✘☆₩♠而定。
PNG的(de)品質一(yī)般要(yào±Ω)到(dào)128。JPG的(de)品質一(yī)般要∑₹(yào)在70-80之間(jiān)，以噪點的(de¶ §α)程度确定。
例如(rú)：皮膚背景圖、發布器(qì)、按鈕背景、發布器(qì)Ω★下(xià)方的(de)tips、右側廣告、用(yòng)戶♠γ≤頭像、用(yòng)戶發布的(de)圖片。
2.通(tōng)用(yòng)類、随機(jī)類™₹®
按照(zhào)首頁圖片出現(xiàn)的(de)頻(pí'¥n)率分(fēn)成：通(tōng)用(yòng)類、随機(jī)類σδα
通(tōng)用(yòng)類：每個(gè)人(rén)首頁都(d✔γ'€ōu)會(huì)看(kàn)到(dào)，圖标、按鈕、小✔β(xiǎo)背景。
例如(rú)，頂部托盤圖标、左導圖标、feed區(q∞₩ū)圖标、發布器(qì)圖标、身(shēn)份圖标、操作(zuò)類圖标、狀®∏™态類圖标、按鈕。盡可(kě)能(néng)的(de↕≥®")采用(yòng)PNG的(de)格式保存，文(wéφ¥n)件(jiàn)會(huì)相(xiàng)對(duì)來(σ♥lái)說(shuō)較小(xiǎo)一(ε ♣♣yī)些(xiē)。
下(xià)圖為(wèi)微(wēi)博的(>§↕≤de)按鈕和(hé)左側導航icon小(x' iǎo)圖的(de)，使用(yòng)GIF和∞✘•(hé)PNG格式的(de)大(dà)小(xiǎ™•<o)對(duì)比：
下(xià)圖為(wèi)微(wēi)博的(de)按鈕∏∑背景圖分(fēn)别使用(yòng)GIF和(h§£§é)PNG格式保存的(de)大(dà)小(xiǎo)對(duì)♦↓₩比：
随機(jī)類：根據自(zì)己定義和(hé)發布的(dγεe)內(nèi)容而定。
A.表情GIF
可(kě)以使用(yòng)FireWorks或者ImageReady，± 建議(yì)使用(yòng)ImageReady。
最好(hǎo)是(shì)手動一(yī)張張的(de)調↕φ整，因為(wèi)這(zhè)些(xiē)表情圖的(de)色彩值都(dōu)比$≥較少(shǎo)，如(rú)果使用(yòng)比較大(dà)的(de)顔♠Ω色時(shí)會(huì)存儲量較大(dà)。
另外(wài)，批處理(lǐ)的(de)話(huà)也(yě)是(sh>≥↑∞ì)需要(yào)一(yī)個(gè)文(wén)件(jiànσ≥β)夾一(yī)個(gè)文(wén)件(jiàn)夾去(qù)處理(lǐ¶)，表情的(de)文(wén)件(jiàn)夾太多(§&σduō)了(le)，基本上(shàng)批處理(lǐ)還(há×λi)是(shì)很(hěn)慢(màn)。批處理(lǐ)如(rú)果是(shì♥™∏)使用(yòng)FireWorks的(de)話(huà)，有(★φ yǒu)的(de)動畫(huà)會(huì)出現(x←✔←iàn)變快(kuài)或者是(shì)缺邊的α♥&∞(de)情況。
手動處理(lǐ)時(shí)，根據÷επ索引色的(de)多(duō)少(shǎo)來(lái)存，一(yī)般來£ε(lái)說(shuō)4-128索引色存儲。
B.換膚類圖片：
采用(yòng)JPG格式或者PNG格式。
皮膚的(de)主要(yào)背景圖中如(rú)含有(yǒu)真實₽ 的(de)照(zhào)片或者文(wén)字∞±©，可(kě)采用(yòng)JPG格式，為(wèi)了(le)保證更接近γ₩↓(jìn)設計(jì)圖需采用(yòng)85以上(shàng)的(de≠λ₩)品質壓縮圖片。如(rú)果色彩跨度不(bù)大(dà)的(de)背景圖δ®≥π片，可(kě)采用(yòng)PNG格式。
C.勳章(zhāng)類：
目前有(yǒu)GIF和(hé)PNG兩種格式，GIγ↕☆F的(de)是(shì)小(xiǎo)圖、δ≤÷✔PNG的(de)是(shì)中圖和(hé)大(dà)圖。品質選1≥♠28即可(kě)。
這(zhè)個(gè)目錄批處理(lǐ)比較快(kuài≥×)。因為(wèi)都(dōu)是(shì)在同一(y£®♥ī)個(gè)文(wén)件(jiàn)夾裡(lǐ↓↓®α)。但(dàn)是(shì)手動的(de)話(hu↓♠↔©à)會(huì)更小(xiǎo)一(yī)點。 ₩★$
D.各種廣告：
發布器(qì)下(xià)方tips、右側廣告、底部廣告₩。采用(yòng)JPG格式或者PNG格≥≠式。
E.用(yòng)戶相(xiàng)關♣"↑圖：
頭像、用(yòng)戶發布的(de)圖這(zhè)個(g耩)需要(yào)在後台控制(zhì)壓縮品質。采用(yò∏λ¥∏ng)JPG格式或者PNG格式。
