圖片優化調研之理論篇

前言

內容較多，理論部分比較基礎。對於新人而言，從淺入深，比較好理解；對於老手而言，可跳過，可直接看實踐部分。 總之，但願對你們有所幫助。

1. 收益

爲了提高網站性能，保持網站處於「節食」狀態很是重要——確保全部新引入的資源都是最精簡的，圖像優化就是這樣一項工做。 你們不妨猜猜圖片流量佔總流量的百分比。簡單對知名網站中圖片在整個頁面大小中所佔比例作了一個調研。

計算其平均值：44.94%。 不必定絕對精確, 可是很是接近。固然，這裏的數據主要以首屏時間段採集數據。 從這個數據能夠看出，對於圖像的優化（固然要在只有輕微質量損耗或無損的前提下）是具備巨大潛力的。咱們只須要改善細節，就可輕鬆實現減小頁面加載時間、節省帶寬、節省磁盤空間等。

 

2. 優化步驟

• 肯定所需圖像質量的狀況下，正確選擇圖像格式。製做最優圖像的一步，就是理解普遍應用在Web上的3中圖像格式——JPEG、PNG和GIF——的特色，而後根據實際狀況（圖像顏色數、清晰度等）來選擇合適的格式。
• 利用無損壓縮技術儘量地削減圖片大小。這一步特別須要一套工程化的解決方案。手動重複同一項工做是很費時的，實際上，如今已經有不少優秀的開源圖優化工具。能夠經過編寫一個腳原本處理全部的圖像文件，首先判斷文件類型，而後運行相應的工具來進行優化。

3. 圖像特性

3.1 幾點理論

3.1.1 位圖和矢量圖

矢量圖：是經過組成圖形的一些基本元素，如點、線、面、邊框、填充色等信息經過計算的方式來顯示圖形的。電腦在顯示的時候則經過這些數據區繪製出咱們定義的圖像。矢量圖的優勢在於文件相對較小，而且放大不會失真。缺點是這些完美的幾何圖形很難表現出天然度很高的寫實圖像。 咱們在web頁面上所使用的圖像都是位圖，即使有些稱爲矢量圖形（如矢量icon等）也是指經過矢量工具進行繪製而後再轉成位圖格式在web上使用的。

位圖（像素圖或柵格圖）：經過記錄圖像中每個點的顏色、深度、透明度等信息來存儲和顯示圖像。位圖的優勢是利於顯示色彩層次豐富的寫實圖像。缺點是文件大小較大，放大和縮小圖像會失真。

3.1.2圖 形和照片

無論你使用哪一種圖像格式、優化方法取決於圖像的具體類型：

圖形：網站的logo、草圖、圖標、大部分動畫和圖標都屬於圖形。這些圖像經過由連續的線條或其餘尖銳的顏色過渡組成，顏色數量相對較少。

照片：照片一般有百萬數量級的顏色，而且包含平滑的顏色過渡和漸變，想象一下用相機拍攝的日落時的照片。

3.1.3 像素和RGB

圖像由像素組成，像素是圖像中最小的信息單元。咱們可使用不一樣的顏色模型來描述像素，在計算機圖像處理上，RGB顏色模型是最經常使用的一種。

在RGB顏色模型中，採用包含紅（R）、綠（G）和藍（B）的數量多少的方式來描述一個像素。R、G和B被稱爲成分（又稱爲通道），每種成分的強度值範圍在0~255之間。咱們常常在HTML合CSS中使用的是十六位進制的成分值，範圍從00~FF。將不一樣強度的成分組合在一塊兒，就能夠得到不一樣的顏色。

3.1.4 真彩色圖像VS調色板（索引）圖像格式

使用RGB顏色模型到底能夠展示多少種不一樣的顏色呢？答案是多餘1600萬種：256 * 256 * 256（或者2^24）能夠獲得16777216種組合。能夠支持這麼多顏色的圖像格式叫作真彩色圖像格式，好比JPEG和真彩色類型的PNG。

爲了在存儲圖像信息時節省一些空間，有一項技術是將圖像中各類不一樣的顏色提取出來創建一個表，這個表一般叫作調色板（也能夠成爲索引）。有了這個顏色表，就能夠經過將調色板中的條目和每一個像素從新匹配，達到從新繪製整個圖像的目的。

調色板能夠包含任意RGB顏色值，可是最常用的掉色斑圖像格式——GIF和PNG8——會限制調色板中最多隻能包含256中顏色。這不是說你只能夠從256種已經定義好的顏色中選擇，偏偏相反，你能夠從1600+萬的顏色中選擇你須要的值，可是單個圖像中最多隻能包含256種顏色。

3.1.5 透明和alpha通道（RGBA）

RGBA並不是另外一種大相徑庭的顏色模型，而是在RGB的基礎上作了擴展。額外的成分A表明alpha透明，值的範圍也是從0~255，但實際上不一樣的程序和庫會將透明定義爲從0%~100%的百分比，或者從0~127的值。alpha通道描述了透過圖像像素能夠看到下面的內容的程度。

3.1.6 隔行掃描

當網速很慢時，大圖像會隨着下載的速度逐行顯示，從上到下每次顯示一行，緩慢地向下遞進。爲了提升用戶體驗，部分圖像格式支持對那些連續採樣的圖像進行隔行掃描。隔行掃描可讓用戶在完整下載圖像以前，看到圖像的一個粗略版本，從心理上消除頁面被延遲加載的感受。

3.2 不一樣圖像格式的特性

3.2.1 GIF

GIF是圖形交換格式（Graphics Interchange Format）的縮寫，是一種調色板圖像格式。

• 透明

GIF容許一個二進制（是/否）類型的透明度，每一個像素要麼要徹底透明（不包含顏色），要麼是徹底不透明的（包含一個單色）。這就意味着它不支持alpha（可變的）透明，取而代之的是，調色板中的某個顏色能夠被標記爲標示透明，而透明像素則會被分配爲這個顏色值。因此，若是你爲GIF設置了透明像素，那麼就會「消耗」一個調色板條目。

gif圖像索引色（二進制類型）透明設置透明會"消耗"一個調色板（顏色表）條目

 

gif圖像索引色（二進制類型）透明設置非透明會減小一個調色板（顏色表）條目

• 動畫

GIF格式支持動畫。GIF動畫如今是有一些應用，好比廣告條（雖然主要以flash爲主），還有在富互聯網應用（RIAs）中出現的「加載中」提示符。

• 無損

GIF是無損的，也就是說你能夠打開任意一個GIF文件，作一些修改，保存關閉時不會損失任何質量。

• 逐行掃描

當生成GIF文件時，會使用一個壓縮算法（叫作LZW）來減少文件的大小。當壓縮GIF時，會從上到下一行一行地對像素進行掃描。這種狀況下，當圖像在水平方向有不少重複顏色時，能夠得到更好的壓縮效果。好比，有一個500*10像素的圖像，圖像上包含一些條紋，就是說水平方向是由相同顏色線條組成的，將這個圖像旋轉90度後，其垂直方向是由相同顏色的條紋組成的，此時後者的文件要大於前者。

• 隔行掃描

GIF支持可選的隔行掃描

在Photoshop中設置隔行掃描

3.2.2 JPEG

JPEG是照片存儲的實際標準。考慮到人類眼睛對顏色和光線強弱的感知，這種格式經過各類技術來減小顯示圖片所必須的信息，因此它能在通過高度壓縮的文件中存儲高分辨率的圖像。

• 有損

JPEG是一種有損的格式，用戶能夠設置自定義質量級別，這個級別決定了有多少圖像信息會被丟棄。質量級別的值從0到100，可是就算設置爲100，也一樣會有必定程度的質量損耗。

當你要對某個圖像進行多項編輯操做時，最好使用無損的圖像格式來保存中間結果，而後在完成全部的修改後另存爲JPEG格式。不然你將會在每次保存時都損耗一些質量。

但也有少數操做是無損的，好比：

　　旋轉（只有在旋轉90度、180度和270度的狀況下） 　　裁剪 　　翻轉（水平或垂直） 　　從標準模式切換到漸進模式，反之亦然 　　編輯圖像的元數據 

• 透明和動畫

JPEG不支持透明和動畫

• 除了默認的標準JPEG(Baseline)，還有一種漸進JPEG(Progressive JPEG)，支持隔行掃描。Internet Explorer不會逐步地渲染漸進JPEG圖像，而是在圖像徹底下載時當即所有顯示出來。

3.2.3 PNG

• 真彩色和調色板PNG格式

PNG格式有幾種類型（PNG8/PNG24/PNG32），但它們大體分爲兩種：調色板PNG格式和真彩色PNG格式。你可使用調色板PNG格式來替代GIF格式，使用真彩色PNG格式來代替JPEG。

對於PNG格式的類型，PNG8是調色板PNG的暱稱；PNG24是真彩色PNG的別稱，可是不包括alpha通道；PNG32也是真彩色PNG的別稱，可是包括alpha通道。還有其餘PNG格式（如灰度PNG），使用概率太小，在此不討論。

• 透明

PNG支持徹底的alpha透明，在IE6中使用這種特性會出現兩種奇怪的現象。

1> 全部在調色板PNG中的半透明現象都會在IE6下顯示爲完整透明。
2> 真彩色PNG中的alpha透明像素，會顯示爲有背景色（一般是灰色的）。

對於第一個問題，咱們能夠在全部現代瀏覽器上實現「漸進加強」半透明圖像的效果，在IE6中實現「優雅降級」爲和GIF相似透明度的圖像。

• 動畫

雖然已經有相關實驗和實際應用存在，但截至目前，針對動畫PNG格式，尚未跨瀏覽器的解決方案。

• 無損

PNG是一種無損的圖像格式，屢次編輯不會下降其質量。這使得用真彩色PNG來保存JPEG的修改過程的中間產物很是合適。

• 逐行掃描

和GIF格式同樣，相對於那些垂直方向有重複顏色的圖像來講，PNG格式對那些水平方向有重複顏色的圖像壓縮比更高。

• 隔行掃描

PNG支持隔行掃描，並使用了比GIF更好的算法，它容許對真實圖像進行更好的「預覽」，可是支持隔行掃描的PNG圖像在文件大小上會更大一些。

PNG非逐行掃描時的文件大小

PNG隔行掃描時的文件大小

3.2.4 PNG和其餘圖像格式的對比

3.2.4.1 和GIF比較

除了不支持動畫之外，調色板PNG擁有GIF的全部功能。此外，它還支持alpha透明，而且一般壓縮比更高，文件大小更小，因此，應該儘量使用PNG8來代替GIF。

有一個例外就是那些顏色數不多的小圖像，這是GIF的壓縮率可能會更高一些。可是這種小圖像其實應該被放在CSS Sprite中，由於HTTP請求的開銷已經大大超過節省的那點帶寬，並且用PNG格式保存Sprite圖像能夠得到更高的壓縮率。

3.2.4.2 和JPEG比較

當圖像中的顏色數超過256種時，須要使用真彩色圖像格式——真彩色PNG或JPEG。JPEG的壓縮比更高，並且通常來講，JPEG是照片存儲的實際標準。但因爲JPEG是有損的，並且在清晰的顏色過渡周圍會有大色塊（高度壓縮致使的顏色丟失），所以，如下狀況使用PNG更合適：

• 當圖像的顏色略超過256種時，能夠在不損耗任何可見質量的前提下，將圖像轉換爲PNG8格式。使人驚奇的是，有時候就算你剝離了1000種以上的顏色，都不會注意到圖像中所發生的變化。
• 當「大色塊」變得不可接受時，好比說包含不少顏色的圖像，這時候PNG就是更好的選擇。

3.2.5 圖像特性總結

針對以上各個圖像格式的特性，彙總一表格進行比對總結——

圖片自己特性

圖片在瀏覽器下的特性

3.3 圖像編輯軟件

這裏主要簡單介紹下Photoshop和Fireworks的使用，及其對比。 當了解了上述圖片相關理論知識了以後，對於Photoshop及Fireworks中進行圖像輸出的參數設置，就更加清楚了。

3.3.1 Photoshop

對於Photoshop輸出圖像中各類參數的含義及設置技巧，請參考淘寶官網UED官方博客裏的內容：http://ued.taobao.com/blog/2010/12/jpg_png/#4

PNG8的圖像輸出設置參數解析

 

在此彙總要點——

• 對於PNG8的圖像輸出設置，列出如下要點：

  1> 減低顏色深度算法（指定用於生成顏色表/調色表的方法）與顏色（顏色表中使用的顏色數量）：通常狀況下，默認選擇「可選擇」便可。

  2> 仿色方法和仿色（模擬計算機的顏色顯示系統中未提供的顏色的方法）：通常只在圖片顏色過多產生失真的狀況下才須要選擇仿色。建議選擇擴散仿色，能夠適當調節仿色的百分比，以達到最佳效果。方色度越高文件也就越大。

  3> 透明度和雜邊（肯定如何優化圖像中的透明像素）：建議UI根據實際應用場景在保存以前就處理好透明圖像的背景。

  4> 交錯（用於標示圖像是否支持隔行掃描）：從用戶體驗的角度，對於尺寸和文件大小相對較大的圖片建議勾選此項。

• 對於GIF的圖像輸出設置，大體等同於PNG8的設置。

• 對於JPEG的圖像輸出設置，列出如下要點：

  1> 品質：不要存100%品質及50%品質如下的JPEG圖像，默認是80%。經實踐，建議設置60%質量（等同於Fireworks的80%）。

  2> 優化（建立文件大小稍小的加強型JPEG）：勾選此項。

  3> 連續（使圖像支持隔行掃描）：勾選此項在某些狀況下可壓縮文件大小（圖片大小大於10K時），某些狀況下會增大文件大小，建議在保存時根據實際狀況而定。不過IE6及更早版本的IE不支持JPEG連續顯示，而是在圖片徹底加載後一次成像，用戶體驗上可能還不如逐行顯示的好。

  4> 模糊：建議設置0.1~0.5之間。

  5> 嵌入顏色配置文件：將顏色配置文件與文件保留在一塊兒，供某些瀏覽器用於色彩校訂。

  6> 雜邊：指定原稿中透明像素的填充色。

對於JPEG中的「連續」這個參數設置，須要多闡述一些——

咱們知道它的設置，使得圖像在瀏覽器中逐步進行渲染，就是容許用戶在圖像還在傳輸時，就能看到一個低分辨率的圖像。問題是，漸進JPEG圖像的大小和未通過漸進處理的圖像相比，是更大，仍是更小呢？

經過對從Yahoo圖片搜索API中隨機找到10000張圖像進行試驗（http://yuiblog.com/blog/2008/12/05/imageopt-4/），咱們得出的結論是沒法肯定。實際上，測試結果遍及了整個圖表，但從中能夠看出一個趨勢，大於10KB的圖像能夠經過轉換成漸進JPEG圖像來得到更好的壓縮率，較小的圖像適合非漸進的標準JPEG圖像。下圖中展現了原來的文件大小和通過優化的文件大小的差異。圖表展現的最大大小是30KB，可是趨勢很是平坦，意味着漸進編碼所帶來的收益是隨着文件大小遞增的。

文件大小和漸進JPEG圖像帶來的收益之間的關係。Y軸表明標準圖像和漸進圖像之間在文件大小上的差異，Y軸的值越大，表明越適合使用漸進編碼

3.3.2 Fireworks

• 先看一下對PNG8圖像導出的設置——

1> 索引色調色板：

• 最合適：一個派生自文檔中的實際顏色的自定義調色板。一般會產生最高品質的圖像。
• Web 最適色：其中的顏色已轉換爲與其最接近的網頁安全色的最適色彩調色板。網頁安全色是來自「網頁 216 色」調色板的顏色。
• 網頁 216 色：一個包含 Windows 和 Mac OS 計算機共有的 216 種顏色的調色板。此調色板一般稱爲網頁安全或瀏覽器安全調色板，這是由於在 8 位顯示器上查看時，它在任一個平臺上的各類 Web 瀏覽器中都產生至關一致的效果。
• 精確：包含圖像中使用的精確顏色。只有包含 256 種或更少的顏色的圖像才能使用「精確」調色板。不然，調色板會切換到「最合適」。
• Windows 和 Mac OS：分別包含由 Windows 或 Mac OS 平臺標準定義的 256 種顏色。
• 灰度等級 一個包含 256 種或更少的灰色陰影的調色板。選擇此調色板可將圖像轉換爲灰度圖像。
• 黑白：一個只包含黑、白兩種顏色的調色板。
• 一致：一個基於 RGB 像素值的數學調色板。
• 自定義：一個通過修改或從外部調色板（ACT 文件）或 GIF 文件加載的調色板。

通常狀況下，選擇」最合適「便可。

2> 抖動

圖象抖動是一種在計算機繪圖中使用的技術，用來在單色顯示器或打印機上產生不一樣灰度的視覺效果，或在彩色顯示器或打印機上產生額外的彩色視覺效果。這種技術的成敗取決於如何更合理的對圖象區進行分組並更合理的在每個由多個像素組成的分組中分配黑白像素比例（對單色顯示器或打印機而言）或幾種彩色像素比例（對彩色顯示器或打印機而言）。因爲這些分組很小（一般僅僅是幾個像素的級別），所以人眼會將其視爲一種由分組中幾種顏色共同混合而成的某種單一顏色。這就解決了如何在8位顯示設備上顯示24位或32位顏色的問題。

利用Web抖動填充在你須要在網頁中使用非Web安全色時是頗有用的。若是你沒有使用Web抖動，則當你的文檔經由一個Web安全色調色板導出時，文檔中的非Web安全色會被轉換成最接近的Web安全色或徹底聽命於用戶端瀏覽器抖動算法的處理，而Web抖動填充是經過將兩種Web安全色混合在一塊兒從而產生出一種最接近你所須要的非Web安全色的。這樣作的好處是避免了因各類不一樣瀏覽器所採用的抖動算法的不一樣而致使同一種非Web安全色在不一樣的計算機上顯示的顏色不一樣，同時也保證了即便在瀏覽器的圖像抖動被關閉的狀況下也不會影響顏色的顯示。

抖動主要應用於如下三種狀況: a> 將非web安全色使用web安全色混合顯示 b> 製做半透明圖片 c> 減小遞進過程不天然的過渡

3> 其餘設置

對於其餘設置，等同於Photoshop中的參數設置，如"交錯式瀏覽器顯示"等同於ps中」交錯「、」漸進式瀏覽器顯示「等同於ps中的」連續「。

3.3.3 Photoshop與Fireworks的對比

這裏，我僅僅列出和切圖過程及圖片導出相關的一些區別。

對於ps的優點，它可以無損處理分層結構，可用於從PSD文件中精確提取局部圖層。 對於fw的優點，對於PNG8的alpha透明度有着極好的支持。 對於二者在圖像優化方面的對比，可參考文章Fireworks vs Photoshop Compression

對於JPEG格式，咱們選擇色彩度豐富的圖片來作測試（除了品質不一樣，其餘參數均相同。由於ps裏的60%效果至關於fs裏的80%）——

　　　　　　　  　  

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  PS與FW對JPEG圖像導出大小對比

對於PNG8格式，先選擇顏色數量小於256的來作個測試——

　　　　   

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PS與FW對PNG8圖像導出大小對比(顏色值小於256)

對於PNG8格式，再選擇顏色數量大於256的來作個測試（對於調色板，ps選擇」可選擇「，fw選擇」抖動100%「）——

  

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PS與FW對PNG8圖像導出大小對比(顏色值大於256)

因爲在日常切圖過程當中，對於PNG8格式的選取是最多的，且大多顏色數大於256（在256-500之間顏色數的圖使用PNG8進行輸出，損耗很小），且對於JPEG的輸出，Fireworks一樣勝出。所以，使用Fireworks導出圖片將獲得更好的效果。

4.自動無損圖像優化

如今已經理解了不一樣的圖像格式的特性及如何使用圖像編輯軟件有效優化導出圖像，而後咱們再來看看如何優化這些圖像。這個過程的核心之處在於：

• 整個過程是自動的，不須要人工介入
• 全部操做都是無損的，不用擔憂圖像質量會受損
• 使用免費的命令行工具完成

不一樣類型的圖像的處理方法不一樣，可是咱們可使用腳原本完成自動化操做。主要討論如下內容：

• 優化PNG格式的圖像
• 剝離JPEG中的元數據
• 對GIF進行優化

4.1 優化PNG格式的圖像

PNG格式將圖像信息保存在」塊「中。這種方式很利於擴展，由於你能夠添加一些自定義的塊實現額外功能，並且不識別這些塊的程序會自動忽略這些內容。但對於web顯示來講，大部分的塊都並不是必要，咱們能夠安全地將它們刪除。還有一點好處，當咱們將叫作gamma的塊刪除後，實際上會提高跨瀏覽器的顯示效果，由於各個瀏覽器對gamma校訂有着迥然不一樣的支持。

對於PNG優化壓縮的命令行工具很是之多，請看13 Free Tools to Optimize and Compress PNG to Reduce Image Size。這裏我僅僅使用幾款比較火的命令行工具進行嘗試，簡單介紹下這4款——

png壓縮工具	官網	命令	備註
pngcrush	http://pngcrush.com/	pngcrush -rem alla -reduce src.png dest.png	-rem alla ： 刪除全部的塊，但保留控制透明的alpha塊 -reduce   ： 若有可能，嘗試減小調色板中的顏色數量
optipng	http://optipng.updatestar.com/	1> 直接進行壓縮(覆蓋源文件)：optipng src.png 2> 批量壓縮（使用通配符）：optipng *.png 3> 指定壓縮輸出路徑：optipng *.png -dir dirname	-dir：指定輸出目錄
pngout	http://advsys.net/ken/utils.htm	pngout src.png desc.png
pngoptimizer	http://www.pngoptimizer.com/

 

下面，咱們拿一張圖片進行測試——

png命令行優化測試圖片

測試結果見圖——

命令行工具對PNG8壓縮率測試

命令行工具對PNG32壓縮率測試

能夠看到，總體來講，從壓縮率來說，pngout > pngoptimizer > pngcrush > optipng。

4.2 剝離JPEG中的元數據

JPEG文件中包含以下元數據：

• 註釋
• 應用程序定義的內部信息（好比Photoshop）
• EXIF(可交換圖像文件——Exchangeable Image File Format)信息，好比拍攝用的相機型號、拍攝日期、拍攝位置、縮略圖等，甚至還能夠包含音頻信息等。

這些原數據不會影響圖像顯示，能夠被安全的移除。對元數據的處理，湊巧也是咱們以前提到的對JPEG進行無損壓縮的方法之一，能夠將文件中那些不須要的部分直接剔除，而不會影響視覺質量。固然，要切記只對你本身擁有的圖像進行去除元數據的操做。若是將屬於別人的圖像中的元數據去除，那麼極可能會將有關版權和做者的數據也一併去除。這是違法的。 推薦兩款工具，jpegtran和jpgoptimiser——

jpeg壓縮工具	官網	命令	備註
jpegtran	http://jpegclub.org/jpegtran/	jpegtran -copy none -optimize src.jpg dest.jpg	-copy none：設置不包含任何元數據 -optimize：強制對霍夫曼表進行優化，從而得到更高的壓縮比
jpgoptimizer	http://jpgoptimiser.com/		線上服務

 

測試圖像——

JPEG壓縮測試圖像

測試結果——

bt_huodong.jpg	73437	73437
jpegtran	72548
jpgoptimizer		72548
節省(Byte)	889	889
節省(%)	1.21%	1.21%

發現壓縮率相同（其餘JPEG圖像也是如此），會猜想到http://jpgoptimiser.com/的線上服務使用的即是jpegtran這個命令行工具。

4.3 對GIF進行優化

對於GIF的優化，咱們須要對GIF單幀圖片及多幀圖片（動畫）來分別進行優化。

4.3.1 單幀GIF優化

正如咱們以前討論的，PNG8格式支持GIF全部的功能，因此將GIF轉換成PNG8，視覺上應該感受不到變化。可使用命令行工具ImageMagick（http://imagemagick.org/）來完成轉換。固然，不要忘了將GIF轉換爲PNG8以後，再使用PNG命令行工具隊PNG再進行一遍優化壓縮。

4.3.2 多幀GIF優化

核心介紹gifsicle——

對於GIF而言，由於動畫包含不少幀，而且圖像上的部份內容在不一樣幀上都是同樣的，因此gifsicle經過將動動畫裏面連續幀中的重複像素移除，來達到優化的目的。

gif優化工具	官網	命令	備註
gifsicle	http://www.lcdf.org/gifsicle/	gifsicle --optimize src.gif > desc.gif gifsicle --batch -i *.gif	-i：使得對應gif圖片支持隔行掃描 --batch：直接替換原有文件

OK，咱們對一個loading圖片進行測試——

oading壓縮實例圖

接下來看看測試結果——

img_loading.gif	2003	2003
gifsicle --optimize	968
gifsicle --optimize -i		968
節省(Byte)	1035	1035
節省(%)	51.67%	+51.67%

 

這裏的「-i」參數，使得圖像支持隔行掃描。使得圖像大小變大。這裏主要參考非「-i」的數據便可。

固然，gifsicle一樣對單幀gif圖片進行優化，但優化效果並很差。看看測試圖像——

 

單幀gif測試圖（32595KB）

測試結果——

btn_icon.gif	32595	32595
gifsicle --optimize	31816
gifsicle --optimize -i		35679
節省(Byte)	779	+3084
節省(%)	2.39%	+9.46%

 

會看到，gifsicle對單幀gif的優化效果並非很好。

4.4 多級壓縮

每個命令行工具都有本身的壓縮算法，咱們不妨試試將圖像進行連續使用不一樣方式進行壓縮。

pngcrush -> optipng -> pngout ->pngoptimiser
27050     -> 26872   -> 25853  -> 25853

pngoptimiser - > pngout -> optipng -> pngcrush 
29586          - > 25853   -> 25853  -> 25853

咱們會看到，pngout的壓縮率是最高的，通過pngout壓縮以後的圖片，再使用其餘工具進行壓縮，文件大小保持不變。 從我的而言，確實比較喜歡使用pngout這個工具。官網提供一個windows平臺客戶端版本——http://www.ardfry.com/pngoutwin/

pngout客戶端批量壓縮網盤圖片

5. 其餘圖片優化

我以爲，主要的圖片優化核心要點就在於上述提到的兩步——其一，合理選擇圖片格式；其二，圖片自動無損壓縮。

固然，還有很多其餘圖片優化，不僅僅是通用的理論性的優化，固然還有根據具體產品具體定製的優化方案。在此，羅列一些經常使用的圖片優化方法——

• 將真彩色PNG轉換爲索引色PNG

推薦兩個工具：pngquant和pngng

我的不建議使用，除非確保顏色數比較靠近256（固然，有時，1000種顏色左右轉換爲256索引色圖像時，也不會發現什麼明顯差別。），不然會出現比較嚴重的失真現象。

• 針對alpha透明，避免使用AlphaImageLoader。 它主要針對IE6呢，會形成維護成本提升、凍結瀏覽器（當使用alpha濾鏡後，頁面就再也不支持漸進渲染）、增長內存消耗。由此，咱們最好使用「漸進加強，優雅降級」的方式處理之。
• Sprite應用
• 避免對圖像進行縮放

當在HTML中將一張500 * 500像素的圖像縮小，就會帶來沒必要要的下載開銷：

<img src="image.jpg" width="100" height="100" /> 

• 優化生成的圖像

  第一次請求： 1> 生成圖片 2> 寫入硬盤 3> 進行壓縮 4> 發送

  第二次請求： 1> 服務器端緩存

• 使用CDN

• 緩存

• 圖片懶加載

6. 總結

OK，寫了很多。主要重點——圖片格式選擇及無損壓縮。是比較基礎，但容易被你們忽略的部分。但願你們作好圖片優化的第一步。

至於高級的圖像優化，歡迎你們來補充。

理論部分，主要來自《高性能網站建設進階指南》之第十章——圖像優化。很不錯的一本書，推薦你們閱讀。