新浪微博UDC-淺談圖片優(yōu)化的方法

1 評(píng)論 2792 瀏覽 2 收藏 14 分鐘

在網(wǎng)站優(yōu)化中,如果圖片優(yōu)化得好,不但可以提高頁(yè)面的加載速度,提升網(wǎng)站的用戶體驗(yàn),而且還可以通過(guò)圖片優(yōu)化來(lái)節(jié)省網(wǎng)站的帶寬。那么作為頁(yè)面構(gòu)建工程師應(yīng)該采用什么方法來(lái)優(yōu)化圖片,既能保證UI的還原度,又使圖片最精簡(jiǎn)呢?下面我就個(gè)人經(jīng)驗(yàn),來(lái)簡(jiǎn)單介紹一下圖片優(yōu)化的方法,首先我們了解一些圖片方面的知識(shí):

1.?矢量圖與位圖。

  • ?矢量圖:縮放、旋轉(zhuǎn)不失真的圖像格式,不管你離多近去看都看不到圖形的最小單位。存儲(chǔ)的文件較小,但是很難表現(xiàn)色彩層次豐富的逼真圖像效果。你可以理解成完美的圓型、拋物線等形狀。
  • ?位圖:又叫柵格圖、像素圖,最小單位由像素構(gòu)成,縮放、旋轉(zhuǎn)會(huì)失真。舉個(gè)例子來(lái)說(shuō),位圖就好比十字繡,遠(yuǎn)看時(shí)畫面細(xì)膩多彩,近看時(shí)能看到每一針的色彩過(guò)渡。

十字繡 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 十字繡放大

下表為矢量圖和位圖的對(duì)比:

1-120H422294K43

 

2.有損壓縮、無(wú)損壓縮。

  • 有損壓縮:特點(diǎn)是保持顏色的逐漸變化,根據(jù)人眼觀察現(xiàn)實(shí)世界的?突然變化,?然后使用附近的顏色通過(guò)漸變或其他形式進(jìn)行填充。因?yàn)樗攸c(diǎn)的數(shù)據(jù)信息,所以存儲(chǔ)量會(huì)降低,還不會(huì)影響圖像的還原度質(zhì)會(huì)有所下降。JPG是有損壓縮格式,在存儲(chǔ)圖像時(shí)會(huì)把圖像分解成8*8像素的網(wǎng)格單單獨(dú)優(yōu)化。舉個(gè)例子:白色小塊為8*8px,黑色底色塊為32*32px,當(dāng)小白塊已經(jīng)不是純白色了,它周圍的小白塊卻很尖銳,如下圖所示:

1-120H4222955952

右上角的白色格子剛好沒(méi)有在8*8像素的網(wǎng)格單元中,所以保存時(shí)會(huì)跟周圍的8*8的網(wǎng)格單元顏色融合,下圖的效果:

1-120H42231032N

這就是平時(shí)保存JPG圖片時(shí)圖像會(huì)模糊的原因,下面是幾張彩色圖的局部對(duì)比效果:

1-120H4223112195

  • 無(wú)損壓縮:利用數(shù)據(jù)的統(tǒng)計(jì)冗余進(jìn)行壓縮,真實(shí)的記錄圖像上每個(gè)像素點(diǎn)的數(shù)據(jù)信息。他的原理是先判斷哪些顏色相同,哪些不同,將相同顏色的數(shù)據(jù)信息進(jìn)行壓縮記錄,把不同的數(shù)據(jù)另外保存。多次存儲(chǔ)后圖片的品質(zhì)不會(huì)下降。

為什么無(wú)損壓縮的圖也會(huì)有失真的?因?yàn)樗膲嚎s原理是通過(guò)索引圖像上相同區(qū)域的顏色進(jìn)行壓縮和還原,也就是說(shuō)只有在圖像的顏色數(shù)量小于我們可以保存的顏色數(shù)量時(shí),才能真實(shí)的記錄和還原圖像,否則就會(huì)丟失一些圖像信息。例如,PNG-8和GIF格式:

1-120H4223121M0

而PNG24為真彩色所以顏色表為空,不會(huì)失真。

0

3.?PNG?、GIF?、JPG圖片對(duì)比。

在我們進(jìn)行圖像優(yōu)化技術(shù)前,需要學(xué)習(xí)有關(guān)的圖片格式的一些技術(shù)細(xì)節(jié)。每個(gè)圖形格式都有自己的優(yōu)勢(shì)和弱點(diǎn),知道他們會(huì)使你得到更好的視覺(jué)質(zhì)量和壓縮品質(zhì)。

1-120H42255452C

網(wǎng)頁(yè)圖片優(yōu)化是網(wǎng)頁(yè)加速中非常重要的一步,對(duì)圖片進(jìn)行壓縮,不僅能夠節(jié)約帶寬,并且加快網(wǎng)頁(yè)的速度。我們常用的圖片編輯軟件都可以在壓縮圖片。

  • PNG-8?的高壓縮比

切圖時(shí),有時(shí)選擇?PNG-8?可以獲得更高的壓縮比。注意,是?PNG-8,不是?PNG-24。不過(guò)有些情況下還是?GIF?或?JPG?會(huì)小一些,需要根據(jù)實(shí)際情況調(diào)試以選擇最佳方案。

  • PNG-24?的優(yōu)化技巧,使用色調(diào)分離:

拿微博左側(cè)導(dǎo)航的小icon為例,壓縮后的圖像大小對(duì)比如下圖:

2226015027-8

PS色調(diào)分離的操作步驟如下:

2226015a7-9

222601B39-10

對(duì)比大?。?/p>

1-120H4225621Y8

使用工具優(yōu)化后,還能夠小一些:

222601AJ-12

請(qǐng)注意,上圖中原本是GIF格式的圖片被改為了PNG格式::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1。所以,在使用工具優(yōu)化時(shí)后需要再查看一下文件格式是否被更改,避免漏過(guò)某些圖片沒(méi)有優(yōu)化。

圖片優(yōu)化在微博首頁(yè)上的應(yīng)用:

1.?圖型類、照片類

對(duì)于圖像格式的選擇,我們還需要考慮圖片的使用場(chǎng)景或功能,概括為兩類:圖型類、照片類

圖型類:圖形符號(hào),具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性,顏色數(shù)量較少。

圖型類一般可以使用PNG格式或者GIF格式。優(yōu)化時(shí)可采用PNG格式為PNG8或者PNG24,品質(zhì)為32,如果色彩有損失可采用品質(zhì)64或者128。

例如:首頁(yè)左導(dǎo)的圖標(biāo)、feed區(qū)圖標(biāo)、勛章圖、表情動(dòng)畫都屬于圖形。

照片類:照片通常含有百萬(wàn)數(shù)量級(jí)的顏色,包括平滑的顏色過(guò)度和漸變,如果是圖形較為復(fù)雜,圖中有時(shí)會(huì)出現(xiàn)真實(shí)的照片。

照片類一般用PNG和JPG??梢愿鶕?jù)圖片色彩的豐富程度而定。

PNG的品質(zhì)一般要到128。JPG的品質(zhì)一般要在70-80之間,以噪點(diǎn)的程度確定。

例如:皮膚背景圖、發(fā)布器、按鈕背景、發(fā)布器下方的tips、右側(cè)廣告、用戶頭像、用戶發(fā)布的圖片。

2.?通用類、隨機(jī)類

按照首頁(yè)圖片出現(xiàn)的頻率分成:通用類、隨機(jī)類

通用類:每個(gè)人首頁(yè)都會(huì)看到,圖標(biāo)、按鈕、小背景。

例如,頂部托盤圖標(biāo)、左導(dǎo)圖標(biāo)、feed區(qū)圖標(biāo)、發(fā)布器圖標(biāo)、身份圖標(biāo)、操作類圖標(biāo)、狀態(tài)類圖標(biāo)、按鈕。盡可能的采用PNG的格式保存,文件會(huì)相對(duì)來(lái)說(shuō)較小一些。

下圖為微博的按鈕和左側(cè)導(dǎo)航icon小圖的,使用GIF和PNG格式的大小對(duì)比:

2226011406-15

下圖為微博的按鈕背景圖分別使用GIF和PNG格式保存的大小對(duì)比:

1-120H4224055M9

隨機(jī)類:根據(jù)自己定義和發(fā)布的內(nèi)容而定。

A.?表情GIF

可以使用FireWorks或者ImageReady,建議使用ImageReady。

最好是手動(dòng)一張張的調(diào)整,因?yàn)檫@些表情圖的色彩值都比較少,如果使用比較大的顏色時(shí)會(huì)存儲(chǔ)量較大。

另外,批處理的話也是需要一個(gè)文件夾一個(gè)文件夾去處理,表情的文件夾太多了,基本上批處理還是很慢。批處理如果是使用FireWorks的話,有的動(dòng)畫會(huì)出現(xiàn)變快或者是缺邊的情況。

手動(dòng)處理時(shí),根據(jù)索引色的多少來(lái)存,一般來(lái)說(shuō)4-128索引色存儲(chǔ)。

B.?換膚類圖片:

采用JPG格式或者PNG格式。

皮膚的主要背景圖中如含有真實(shí)的照片或者文字,可采用JPG格式,為了保證更接近設(shè)計(jì)圖需采用85以上的品質(zhì)壓縮圖片。如果色彩跨度不大的背景圖片,可采用PNG格式。

C.?勛章類:

目前有GIF和PNG兩種格式,GIF的是小圖、PNG的是中圖和大圖。品質(zhì)選128即可。

這個(gè)目錄批處理比較快。因?yàn)槎际窃谕粋€(gè)文件夾里。但是手動(dòng)的話會(huì)更小一點(diǎn)。

D.?各種廣告:

發(fā)布器下方tips、右側(cè)廣告、底部廣告。采用JPG格式或者PNG格式。

E.?用戶相關(guān)圖:

頭像、用戶發(fā)布的圖這個(gè)需要在后臺(tái)控制壓縮品質(zhì)。采用JPG格式或者PNG格式。

圖片優(yōu)化工具Smush.it?介紹

 

Smush.it?是?YUI?團(tuán)隊(duì)制作的一款基于?YUI?的在線圖片優(yōu)化工具。

它是基于以下四條圖片優(yōu)化建議制作的服務(wù):

·?移除?JPG?中的?meta?數(shù)據(jù)。

·?優(yōu)化?JPG?的壓縮率。

·?轉(zhuǎn)化特定?GIF?圖片到可索引的?PNG?格式圖片。

·?從可索引的圖片中移除沒(méi)用到顏色信息。

所以使用?Smush.it?壓縮圖片可以刪除圖片中多余的字節(jié)而不改變圖片的視覺(jué)效果和質(zhì)量。

在實(shí)際使用中發(fā)現(xiàn):

·?它還能把某些JPG圖片轉(zhuǎn)化為PNG圖片。

·?對(duì)于PNG24真彩色圖片,能夠去掉一些肉眼察覺(jué)不到的顏色信息,彌補(bǔ)photoshop和firework優(yōu)化不了PNG24圖片的不足。

·?可以優(yōu)化GIF動(dòng)畫圖片。

Smush.it?使用

方法一:使用Firefox的插件Yslow里的Tools工具中的All?Smush.it?

拿微博首頁(yè)為例:

2226016437-17

Firebug,使用Yslow工具,運(yùn)行后,選擇Tools

222601J17-18

 

點(diǎn)擊All?Smush.it?,會(huì)自動(dòng)跳轉(zhuǎn)到http://www.smushit.com/ysmush.it/得到下圖:

2226014328-19

 

點(diǎn)擊按鈕Download?Smushed?Images后,會(huì)讓下載一個(gè)zip的壓縮文件。

方法二:直接登錄?Smush.it?的網(wǎng)站,把需要壓縮圖片的url粘貼到輸入框中(或者從本地電腦上選取圖片),點(diǎn)擊?Smush?就可以進(jìn)行圖片壓縮,然后?Smuch.it?就會(huì)提供一個(gè)優(yōu)化報(bào)表,顯示圖片壓縮比率和節(jié)省了多少字節(jié),并且提供一個(gè)可下載包含壓縮后的圖片文件的壓縮包。

下圖為直接填寫線上URL的方式(以逗號(hào)隔開):

22260144C-20

下圖為從本地電腦上選取圖片的方式:

222601J52-21

下圖為優(yōu)化結(jié)果:

2226012327-22

歸納:

讓我們?cè)倩仡櫼幌轮攸c(diǎn):

1.?選擇合適的格式:用JPG保存照片、用GIF保存動(dòng)畫,其他圖片使用PNG保存,并盡可能用PNG8。

2.?PNG24圖片的壓縮技巧。

3.?Smush.it的使用。

來(lái)源:新浪微博UDC

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 碉堡了。(得意)

    來(lái)自上海 回復(fù)