淺談CSS樣式png、gif、jpg圖片優化的方法

1、PNG、GIF、JPG圖片對比

     在咱們進行圖像優化技術前，須要學習有關的圖片格式的一些技術細節，每一個圖形格式都有本身的優點和拖弱點，知道他們會使你獲得更好的視覺質量和壓縮品質。

網頁圖片優化是網頁加速中很是重要的一步，對圖片進行壓縮，不只可以節約帶寬，而且加快網頁的速度，咱們經常使用的圖片編輯軟件能夠在壓縮圖片。

PNG-8的高壓縮比

切圖時，有時選擇PNG-8能夠得到更高的壓縮比，注意，是PNG-8，不是PNG-24，不過有些狀況下仍是GIF或JPG會小一些，須要根據實際狀況調試以選擇最佳方案。

對比大小：

一、圖型類、照片類

對於圖像格式的選擇，咱們還須要考慮圖片的使用場景或功能，歸納爲兩類：圖形類、照片類

圖型類：圖形符號，具備高度濃縮並快捷傳達信息、便於記憶的特性，顏色數量較少。

圖型類通常能夠使用PNG格式或者GIF格式。優化時可採用PNG格式爲PNG8或者PNG24,品質爲32，若是色彩有損失可採用品質64或者128.

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

照片類：照片一般含有百萬數量級的顏色，包括平滑的顏色過分和漸變，若是是圖形較爲複雜，圖中有時會出現真實的照片。

照片類通常用PNG和JPG。能夠根據圖片色彩的豐富程度而定。

PNG的品質通常要到128.JPG的品質通常要在70-80之間，以躁點的程度肯定。

例如：皮膚背景圖、發佈器、按鈕背景、發佈器下方的tips、右側廣告、用戶頭像、用戶發佈的圖片。

二、通用類、隨機類

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

通用類：每一個人首頁都會看到，圖標、按鈕、小背景

例如：頂部托盤圖標、左導圖標、feed區圖標、發佈器圖標、身份圖標、操做類圖標、狀態類圖標、按鈕。儘量的採用PNG的格式保存，文件會相對來講較小一些。

下圖爲微博的按鈕盒左側導航icon小圖的，使用GIF和PNG格式的大小對比：

下圖爲微博的按鈕背景圖分別使用GIF和PNG格式保存的大小對比：

隨機類：根據本身定義和發佈的內容而定。

A、表情GIF

能夠使用FireWork或者ImageReady，建議使用ImageReady.

最好是手動一張張的調整，由於這些表情圖的色彩值都比較少，若是使用比較大的顏色時會存儲量較大。

B、換膚類圖片

採用JPG格式或者PNG格式

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

C、勳章類

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

D、各類廣告：

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

E、用戶相關圖：

頭像、用戶發佈的圖這個須要在後臺控制壓縮品質，採用JPG格式或者PNG格式。