4.23日(rì)音(yīn)訊，網站(zhàn)↕"建設中PNG4圖片壓縮技(jì)巧，衆所周知(z×πλ↑hī)，在網站(zhàn)建設中，最點空(kōng)間(jiān)✘☆←的(de)往往是(shì)圖片，它的(deα♠←¶)占用(yòng)比例能(néng)達到(d♥♠ào)三分(fēn)之二，這(zhè)麽龐大(dà)的(de)占用π→≤(yòng)量，勢必會(huì)浪費(fèi)↑&÷我們的(de)空(kōng)間(jiān↔✔)內(nèi)存，那(nà)有(yǒu)沒有(yǒu)辦法進行(xíng)優♣₹≤化(huà)呢(ne)，這(zhè)是(shì)大(dà)家(jiā'¥)所關心的(de)一(yī)個(gè)問(wè®β©n)題，在這(zhè)裡(lǐ)
邯鄲網站(zhàn)建設首創網絡小(xiǎo)編就(jiù)來(lái)教大(dà)家(ji≥'ā)幾個(gè)辦法來(lái)優化(huà)圖片，節約空(kō¶®≈ng)間(jiān)。在網站(zhàn)優化(h☆™uà)中，如(rú)果圖片優化(huà)得<'↓(de)好(hǎo)，不(bù)但(dàn)可(kě)以提高(gāo)β×頁面的(de)加載速度，提升網站(zhàn)的(ε≥de)用(yòng)戶體(tǐ)驗，而且還(hái)可(kě)以通(tōng¶>↔)過圖片優化(huà)來(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à)面我就(j ☆iù)個(gè)人(rén)經驗，來(lái)簡單介紹一(y®∑ī)下(xià)圖片優化(huà)的(de)方法，首先我們了(le)÷∞↕ 解一(yī)些(xiē)圖片方面的(de)知(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)較小(x↑≠iǎ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)說(shuō)，位圖就(jiù)好(hǎo)比十字繡，遠(β÷yuǎn)看(kàn)時(shí)畫(huà)面§∞™細膩多(duō)彩，近(jìn)看(kàn)時(shí)能(néng)看(✔↔λ§kàn)到(dào)每一(yī)針的(d✘εe)色彩過渡。
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)尖銳：
無損壓縮：利用(yòng)數(shù)據的(de)統計(jì)✔ε≈↔冗餘進行(xíng)壓縮，真實的(de)記錄圖±↕≤₽像上(shàng)每個(gè)像素點的(de)σασ數(shù)據信息。他(tā)的(de)原理(lǐ)是(s ¶πhì)先判斷哪些(xiē)顔色相(xiàng)同÷₽，哪些(xiē)不(bù)同，将相(xiàng)同顔色的(dγ<π↓e)數(shù)據信息進行(xíng)壓₽₩÷©縮記錄，把不(bù)同的(de)數(shù)據另外(wài)保存。多(d®←uō)次存儲後圖片的(de)品質不(bù)會 ₽ε§(huì)下(xià)降。
為(wèi)什(shén)麽無損壓縮的(de)圖也(yě)會(h ™uì)有(yǒu)失真的(de)？因為(wèi)他(tā)的(de)γα$'壓縮原理(lǐ)是(shì)通(tōng)過"₽✘索引圖像上(shàng)相(xiàng)同區(qū)域的(de)顔色進行(× ₽xíng)壓縮和(hé)還(hái)原，也(yě→ '∑)就(jiù)是(shì)說(shuō)隻有(yǒu)在圖像• 的(de)顔色數(shù)量小(xiǎo↓≠γ)于我們可(kě)以保存的(de)顔色數(shù)量時(s♦≠↓δhí)，才能(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)£©壓縮比。注意，是(shì)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)具優化(h•£≥uà)後，還(hái)能(néng)夠小(xiǎo)一(yī)些(xiē)：≠≈
請(qǐng)注意，上(shàng)圖中原本是≤ (shì)GIF格式的(de)圖片被改為(w→¥↓èi)了(le)PNG格式。所以，在使用(yòn↓÷ σg)工(gōng)具優化(huà)時(shí)後需要(yào)再查看(→↑ kàn)一(yī)下(xià)文(wén)件↑•<(jiàn)格式是(shì)否被更改，避免漏過某些(x♣✘iē)圖片沒有(yǒu)優化(huà)。
圖片優化(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格式或者GIF格式。"€∏↑優化(huà)時(shí)可(kě)采用(yòng)PNG格式為(wèi)P♣§✔NG8或者PNG24，品質為(wèi)32，如(rú)果©♦色彩有(yǒu)損失可(kě)采用(yòng₹γ ∏)品質64或者128。
例如(rú)：首頁左導的(de)圖标、fee→§d區(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)說(s÷δ≤huō)較小(xiǎo)一(yī)些(xiē)。
下(xià)圖為(wèi)微(wēi)博的(deδα×)按鈕和(hé)左側導航icon小(xiǎ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é)發布的(de)©↓內(nèi)容而定。
A.表情GIF
可(kě)以使用(yòng)FireWorks或者Imag ε£σeReady，建議(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ì)出現(xiàn)變快(±®βkuài)或者是(shì)缺邊的(de)情況。
手動處理(lǐ)時(shí)，根據索引色的(de)多(dΩ"σ uō)少(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)了(l≤₹≈e)保證更接近(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兩種格式，GIF的(de)是(s♠✔€hì)小(xiǎo)圖、PNG的(de)÷¶是(shì)中圖和(hé)大(dà)圖。品質選128即可(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)在後台控制(zδ↑₩εhì)壓縮品質。采用(yòng)JPG格•§式或者PNG格式。
圖片優化(huà)工(gōng)具Smush.it介紹
Smush.it是(shì)YUI團隊制(zhì)作(zuò)的(d<≈β≥e)一(yī)款基于YUI的(de)在線圖片優化(huà)工(g≈•ōng)具。
它是(shì)基于以下(xià)四條圖片優化(huà←÷←)建議(yì)制(zhì)作(zuò)的(de)服務：
·移除JPG中的(d"'♥©e)meta數(shù)據。
·優化(huà)JPG∑₹的(de)壓縮率。
·轉化(huà)特定GIF圖片到(d☆Ω$ào)可(kě)索引的(de)PNG格式圖片。
·從(cóng)可(kě)索引的(de)圖片中移除β♣☆↕沒用(yòng)到(dào)顔色信息。
所以使用(yòng)Smush.it壓&縮圖片可(kě)以删除圖片中多(duō)₽±¶餘的(de)字節而不(bù)改變圖片的(de)視(shì∏✘π)覺效果和(hé)質量。
在實際使用(yòng)中發現(xiàn)：
·它還(hái)能(néng)把某些 δ®β(xiē)JPG圖片轉化(huà)為(wèi)PNG圖片。
·對(duì)于PNG24真彩色圖片，能(n★αéng)夠去(qù)掉一(yī)些(xiē)肉眼察覺不(bù)到(dà"π£Ωo)的(de)顔色信息，彌補photoshop和(hé)firework☆λ優化(huà)不(bù)了(le)PNG24圖片的'★♣(de)不(bù)足。
·可(kě)以優化(huà)Gσ♥βIF動畫(huà)圖片。
