淺談圖片優化的方法

類別: 互聯網

在網站優化中,如果圖片優化得好,不但可以提高頁面的載入速度,提升網站的使用者體驗,而且還可以通過圖片優化來節省網站的頻寬。那麼作為頁面構建工程師應該採用什麼方法來優化圖片,既能保證UI的還原度,又使圖片最精簡呢?下面我就個人經驗,來簡單介紹一下圖片優化的方法,首先我們瞭解一些圖片方面的知識:

1. 向量圖與點陣圖。

  • 向量圖:縮放、旋轉不失真的影象格式,不管你離多近去看都看不到圖形的最小單位。儲存的檔案較小,但是很難表現色彩層次豐富的逼真影象效果。你可以理解成完美的圓型、拋物線等形狀。
  • 點陣圖:又叫柵格圖、畫素圖,最小單位由畫素構成,縮放、旋轉會失真。舉個例子來說,點陣圖就好比十字繡,遠看時畫面細膩多彩,近看時能看到每一針的色彩過渡。

十字繡                                                                                                           十字繡放大

下表為向量圖和點陣圖的對比:

2.有失真壓縮、無失真壓縮。

  • 有失真壓縮:特點是保持顏色的逐漸變化,根據人眼觀察現實世界的 突然變化, 然後使用附近的顏色通過漸變或其他形式進行填充。因為素點的資料資訊,所以儲存量會降低,還不會影響影象的還原度質會有所下降。JPG是有失真壓縮格式,在儲存影象時會把影象分解成8*8畫素的網格單單獨優化。舉個例子:白色小塊為8*8px,黑色底色塊為32*32px,當小白塊已經不是純白色了,它周圍的小白塊卻很尖銳,如下圖所示:

右上角的白色格子剛好沒有在8*8畫素的網格單元中,所以儲存時會跟周圍的8*8的網格單元顏色融合,下圖的效果:

這就是平時儲存JPG圖片時影象會模糊的原因,下面是幾張彩色圖的區域性對比效果:

  • 無失真壓縮:利用資料的統計冗餘進行壓縮,真實的記錄影象上每個畫素點的資料資訊。他的原理是先判斷哪些顏色相同,哪些不同,將相同顏色的資料資訊進行壓縮記錄,把不同的資料另外儲存。多次儲存後圖片的品質不會下降。

為什麼無失真壓縮的圖也會有失真的?因為他的壓縮原理是通過索引影象上相同區域的顏色進行壓縮和還原,也就是說只有在影象的顏色數量小於我們可以儲存的顏色數量時,才能真實的記錄和還原影象,否則就會丟失一些影象資訊。例如,PNG-8和GIF格式:

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

3. PNG 、GIF 、JPG圖片對比。

在我們進行影象優化技術前,需要學習有關的圖片格式的一些技術細節。每個圖形格式都有自己的優勢和弱點,知道他們會使你得到更好的視覺質量和壓縮品質。

網頁圖片優化是網頁加速中非常重要的一步,對圖片進行壓縮,不僅能夠節約頻寬,並且加快網頁的速度。我們常用的圖片編輯軟體都可以在壓縮圖片。

  • PNG-8 的高壓縮比

切圖時,有時選擇 PNG-8 可以獲得更高的壓縮比。注意,是 PNG-8,不是 PNG-24。不過有些情況下還是 GIF 或 JPG 會小一些,需要根據實際情況除錯以選擇最佳方案。

  • PNG-24 的優化技巧,使用色調分離:

拿微博左側導航的小icon為例,壓縮後的影象大小對比如下圖:

PS色調分離的操作步驟如下:

對比大小:

使用工具優化後,還能夠小一些:

請注意,上圖中原本是GIF格式的圖片被改為了PNG格式。所以,在使用工具優化時後需要再檢視一下檔案格式是否被更改,避免漏過某些圖片沒有優化。

圖片優化在微博首頁上的應用:

1. 圖型類、照片類

對於影象格式的選擇,我們還需要考慮圖片的使用場景或功能,概括為兩類:圖型類、照片類

圖型類:圖形符號,具有高度濃縮並快捷傳達資訊、便於記憶的特性,顏色數量較少。

圖型類一般可以使用PNG格式或者GIF格式。優化時可採用PNG格式為PNG8或者PNG24,品質為32,如果色彩有損失可採用品質64或者128。

例如:首頁左導的圖示、feed區圖示、勳章圖、表情動畫都屬於圖形。

照片類:照片通常含有百萬數量級的顏色,包括平滑的顏色過度和漸變,如果是圖形較為複雜,圖中有時會出現真實的照片。

照片類一般用PNG和JPG。可以根據圖片色彩的豐富程度而定。

PNG的品質一般要到128。JPG的品質一般要在70-80之間,以噪點的程度確定。

例如:皮膚背景圖、釋出器、按鈕背景、釋出器下方的tips、右側廣告、使用者頭像、使用者釋出的圖片。

2. 通用類、隨機類

按照首頁圖片出現的頻率分成:通用類、隨機類

通用類:每個人首頁都會看到,圖示、按鈕、小背景。

例如,頂部托盤圖示、左導圖示、feed區圖示、釋出器圖示、身份圖示、操作類圖示、狀態類圖示、按鈕。儘可能的採用PNG的格式儲存,檔案會相對來說較小一些。

下圖為微博的按鈕和左側導航icon小圖的,使用GIF和PNG格式的大小對比:

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

隨機類:根據自己定義和釋出的內容而定。

A. 表情GIF

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

最好是手動一張張的調整,因為這些表情圖的色彩值都比較少,如果使用比較大的顏色時會儲存量較大。

另外,批處理的話也是需要一個資料夾一個資料夾去處理,表情的資料夾太多了,基本上批處理還是很慢。批處理如果是使用FireWorks的話,有的動畫會出現變快或者是缺邊的情況。

手動處理時,根據索引色的多少來存,一般來說4-128索引色儲存。

B. 換膚類圖片:

採用JPG格式或者PNG格式。

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

C. 勳章類:

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

這個目錄批處理比較快。因為都是在同一個資料夾裡。但是手動的話會更小一點。

D. 各種廣告:

釋出器下方tips、右側廣告、底部廣告。採用JPG格式或者PNG格式。

E. 使用者相關圖:

頭像、使用者釋出的圖這個需要在後臺控制壓縮品質。採用JPG格式或者PNG格式。

圖片優化工具Smush.it 介紹

Smush.it 是 YUI 團隊製作的一款基於 YUI 的線上圖片優化工具。

它是基於以下四條圖片優化建議製作的服務:

· 移除 JPG 中的 meta 資料。

· 優化 JPG 的壓縮率。

· 轉化特定 GIF 圖片到可索引的 PNG 格式圖片。

· 從可索引的圖片中移除沒用到顏色資訊。

所以使用 Smush.it 壓縮圖片可以刪除圖片中多餘的位元組而不改變圖片的視覺效果和質量。

在實際使用中發現:

· 它還能把某些JPG圖片轉化為PNG圖片。

· 對於PNG24真彩色圖片,能夠去掉一些肉眼察覺不到的顏色資訊,彌補photoshop和firework優化不了PNG24圖片的不足。

· 可以優化GIF動畫圖片。

Smush.it 使用

方法一:使用Firefox的外掛Yslow裡的Tools工具中的All Smush.it™

拿微博首頁為例:

Firebug,使用Yslow工具,執行後,選擇Tools

點選All Smush.it™,會自動跳轉到http://www.smushit.com/ysmush.it/得到下圖:

點選按鈕Download Smushed Images後,會讓下載一個zip的壓縮檔案。

方法二:直接登入 Smush.it 的網站,把需要壓縮圖片的url貼上到輸入框中(或者從本地電腦上選取圖片),點選 Smush 就可以進行圖片壓縮,然後 Smuch.it 就會提供一個優化報表,顯示圖片壓縮比率和節省了多少位元組,並且提供一個可下載包含壓縮後的圖片檔案的壓縮包。

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

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

下圖為優化結果:

歸納:

讓我們再回顧一下重點:

1. 選擇合適的格式:用JPG儲存照片、用GIF儲存動畫,其他圖片使用PNG儲存,並儘可能用PNG8。

2. PNG24圖片的壓縮技巧。

3. Smush.it的使用。

來源:http://udc.weibo.com



淺談圖片優化的方法原文請看這裡