web前端圖片極限最佳化策略

標籤：嵌入   失敗   body   避免   靈活   輸出   script   tag   結構   

隨著web的發展，網站資源的流量也變得越來越大。據統計，60%的網站流量均來自網站圖片，可見對圖片合理最佳化可以大幅影響網站流量，減小頻寬消耗和伺服器壓力。

一、現有web圖片格式

我們先來看下現在常用的web圖片的格式：

圖片格式	支援透明	動畫支援	壓縮方式	瀏覽器支援	相對原圖大小	適應情境
baseline-jpeg	不支援	不支援	有損	所有	由畫質決定	所有通用情境
progressive-jpeg	不支援	不支援	有損	所有	由畫質決定	所有通用情境, 漸進式載入
gif	支援	支援	無損	所有	由幀數和每幀圖片大小決定	簡單顏色，動畫
png	支援	不支援	無損	所有	由png色值位元決定	需要透明時
webp	支援	不支援	有損	Chrome、Opera	由壓縮率決定	複雜顏色及形狀，瀏覽器平台可預知
apng	支援	支援	無損	Firefox、Safari、iOS Safari	由每幀圖片決定	需要半透明效果的動畫
svg	支援	支援	無損	所有(IE8以上)	由內容和特效複雜度決定	簡單圖形，需要良好的放縮體驗，需要動態控製圖片特效
bpg	支援	支援	有損	不支援，需要js解碼	由畫質決定	jpeg上需要極限最佳化的情境

幾種檔案格式的特點概述

• baseline-jpeg
  這種類型的JPEG檔案儲存體方式是按從上到下的掃描方式，把每一行順序的儲存在JPEG檔案中。開啟這個檔案顯示它的內容時，資料將按照儲存時的順序從上到下一行一行的被顯示出來，直到所有的資料都被讀完，就完成了整張圖片的顯示。如果檔案較大或者網路下載速度較慢，那麼就會看到圖片被一行行載入的效果，這種格式的JPEG沒有什麼優點，因此，一般都推薦使用Progressive JPEG
• preogressive-jpeg
  和Baseline一遍掃描不同，Progressive JPEG檔案包含多次掃描，這些掃描順尋的儲存在JPEG檔案中。開啟檔案過程中，會先顯示整個圖片的模糊輪廓，隨著掃描次數的增加，圖片變得越來越清晰。這種格式的主要優點是在網路較慢的情況下，可以看到圖片的輪廓知道正在載入的圖片大概是什麼。
  __這兩種jpeg格式檔案的效果對比如下：
  
• 
  jpeg優勢：
  非常通用，JPEG在色調及顏色平滑變化的相片或是寫實繪畫（painting）上可以達到它最佳的效果。
  jpeg劣勢：
  它並不適合於線條繪圖（drawing）和其他文字或圖示（iconic）的圖形,因為它的壓縮方法用在這些圖形的型態上,會得到不適當的結果；
• gif
  GIF(Graphics Interchange Format)的原義是“映像互換格式”，GIF檔案的資料，是一種基於LZW演算法(串表壓縮演算法)連續色調的無損壓縮格式。是目前web網頁中十分常用的一種動畫檔案格式。
  優勢：
  1. 優秀的壓縮演算法使其在一定程度上保證映像品質的同時將體積變得很小
  2. 可插入多幀,從而實現動畫效果
  3. 可設定透明色以產生對象浮現於背景之上的效果
• 劣勢：
  　由於採用了8位壓縮,最多隻能處理256種顏色（2的8次方）,故不宜應用於真彩映像。
• png
  png檔案分為png8(8位透明png)、png24(256色png)、png32(多階透明png)，png的有點在於使用位元影像實現web上的透明圖片，以實現比較好的體驗。
  
• 
  優勢：
  1. 支援256色調色盤技術以產生小體積檔案
  2. 最高支援48位真彩色映像以及16位灰階映像。
  3. 支援Alpha通道的半透明特性。
  4. 支援映像亮度的gamma校正資訊。- 支援儲存附加文本資訊,以保留映像名稱、作者、著作權、創作時間、注釋等資訊。
  5. 使用無損壓縮。
  6. 漸近顯示和流式讀寫,適合在網路傳輸中快速顯示預覽效果後再展示全貌。
  7. 使用CRC迴圈冗餘編碼防止檔案出錯。
  8. 最新的PNG標準允許在一個檔案記憶體儲多幅映像。
• 劣勢：
  - 但也有一些軟體不能使用適合的預測，產生的檔案較大(IE6隻支援PNG8)
• webp
  目前移動端Android4.0以上、PC端chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri均支援webp格式圖片。
  WEBP與JPG相比較，編碼速度慢10倍，解碼速度慢1.5倍，而絕大部分的網路應用中，圖片都是靜態檔案，所以對於使用者使用只需要關心解碼速度即可。但實際上，webp雖然會增加額外的解碼時間，但是由於減少了檔案體積，縮短了載入的時間，實際上檔案的渲染速度反而變快了。
  圖片載入測試範例
  webp上目前可行的應用情境：
  1. 1.用戶端軟體，內嵌了基於Chromium的webview，這類瀏覽器中應用的網頁是可以完全使用webp格式，提升載入渲染速度，不考慮相容。
  2. 2.用node-webkit開發的程式，用webp可以減少檔案包的體積。
  3. 3.行動裝置 App 或 網頁遊戲 ,介面需要大量圖片,可以嵌入webp的解碼包,能夠節省使用者流量，提升訪問速度
• 優勢：
  - 對於png圖片,webp比png小了45%,但是缺點是你壓縮的時候需要的時間更久了；
  劣勢：
  - 相容性不太好, 只有opera,和chrome支援;
• apng
  簡單來講apng格式圖片使用多個單張png串連起來的動畫圖片格式，支援全透明通道動畫。相比於gif動畫，沒有毛刺，品質更高，但目前支援的瀏覽器並不完全。可以去can i use查看其相容性。目前可用性相對較低，適用於對動畫品質要求很高的情況。
• svg
  是一種向量圖片，支援透明，縮放，動畫，除了android 2.3的手機，其它情境都支援，是一種比較好的圖片代替方案。
  優勢：
  1. 向量圖形，不受像素影響——SVG的這個特性使得它在不同的平台或者媒體下表現良好，無論螢幕解析度如何
  2. SVG對動畫的支援較好；其DOM結構可以被其特定文法或者Javascript控制，從而輕鬆的實現動畫
  3. Javascript可以完全控制SVG Dom 元素
  4. SVG的結構是 XML，其可訪問性（盲文、聲音朗讀等）、可操作性、可程式化性、可被CSS樣式化完勝Canvas。另外，其支援 ARIA 屬性，使其如虎添翼。
• 劣勢：
  - DOM比正常的圖形慢，而且如果其結點多而雜，就更慢了
  - 不適合網頁遊戲等；當然，我們可以結合 Canvas + SVG來實現
• bpg
  http://bellard.org/bpg/
  圖片畫質比較
  效能測試對比
  BPG (Better Portable Graphics) 是一個新的圖片格式。用來代替jpeg和webp的方案。這種格式主要有以下特點
  優勢：
  1. 高壓縮比。在畫質相同的情況下比jpeg小的多
  2. 使用一個很小的js解碼器就可以被瀏覽器支援
  3. 基於高清視頻壓縮標準 (HEVC) 一個子集開發
  4. 支援和jpeg相同的色值，並且在有損壓縮的通知支援透明，
  5. 單通道支援8到14位色值地區
  6. 支援有損壓縮
  7. 可以添加更多的中繼資料編碼
  8. 支援動畫
  9. 相近畫質前提下比webp更小
• 效能：
  - 根據mozilla的研究，bpg使用的HEVC編碼比原生的HEVC效能更好，因為BPG的頭部比HEVC的頭部更小
  - 支援4:2:2和4:2:0的色值設定
  - BPG可以用於硬體上支援HEVC轉碼器
  這種圖片格式目前還沒有被瀏覽器支援，需要js解碼，但其優勢非常明顯。
  另外還有mozjpg、sharpP的圖片格式，由於目前仍在起步階段，這裡暫不介紹了，有興趣的可以去跟進瞭解下。

二、前端的圖片最佳化方案

1. 使用base64編碼代替圖片
   情境：適用於圖片大小小於2KB，頁面上引用圖片總數不多的情況
   原理：將圖片轉換為base64編碼字串inline到頁面或css中
   優勢：減少http的請求次數，並可以放到後台資料庫中，只傳輸字串，有較多的構建工具可以直接實現
   劣勢：這種方法僅限於圖片總數較少，而且圖片大小小於2KB的情況。否則圖片字串會變得很長很長
2. 合并圖片sprite(雪碧圖)
   情境：任何用到頁面圖片的情境
   原理：將多個頁面上用到的背景圖片合并成一個大的圖片在頁面中引用
   優勢：可以有效較少請求個數，而且，而不影響開發體驗，使用構建外掛程式可以做到對開發人員透明。適用於頁面圖片多且豐富的情境。
   劣勢：產生的圖片體積較大，減少請求個數同時也增加了圖片大小，不合理拆分將不利於並行載入
3. 使用css、svg、canvas或iconfont代替圖片
   css代替圖片
   情境：適用於移動端或較進階的瀏覽器，而且繪製的圖案較為簡單。
   原理：css方式可以用來繪製相對簡單的團來代替圖片，一般使用before或者after虛擬元素來豐富圖案的複雜度。
   優勢：具有實現簡單，圖片體積小的特點，可以實現簡單的動態效果
   劣勢：也受限於css的相容性特點，繪製複雜圖案困難
   svg的描述和適用情境上文已說明。
   canvas代替圖片
   情境：需要高效能的圖片或動畫
   原理：適用html5的canvas元素繪製建立圖片
   優勢：整個就是畫2D圖形時，頁面渲染效能比較高，頁面渲染效能受圖形複雜度影響小，效能只受圖形的解析度的影響，畫出來的圖形可以直接儲存為 .png 或者 .jpg的圖形，適合於畫光柵映像或者不規則圖形
   劣勢：沒有dom操作，必須依賴定時器，文字渲染效能差，不能添加描述(title屬性什麼的)，相容性限制
   iconfont是一種web字型來代替圖片的解決方案：
   情境：代替頁面上色彩單一的圖片
   優勢：相容性好，應用廣，目前使用也很廣泛
   劣勢：但是由於字型的顏色設定單一，只能用於代替顏色單一的圖片，對於色彩複雜的圖片，iconfont處理起來比較困難
4. 響應式圖片
   情境：不同終端對同一個圖片需求不一樣，可以根據終端載入不同的圖片來節省沒必要的流量
   原理：通過picture元素，picturefill或平台判斷來為不同終端平台輸出不同的圖片
   優勢：減少沒必要的圖片載入，靈活控制，慢速使用者載入小圖片不至於載入失敗，移動端沒必要載入大尺寸圖片等，可以通過不同方式相容所有瀏覽器
   劣勢：無法避免圖片的載入過程，圖片本身沒最佳化
5. 圖片壓縮
   情境：在不得不載入圖片的前提下，要進一步提升最佳化效果，只能通過有損或無損壓縮來減少圖片的大小。
   原理：對圖片進行無損、有損壓縮，轉為壓縮後圖片來實現
   優勢：減少圖片載入流量，效果比較明顯
   劣勢：伺服器和瀏覽器壓力增大，而且伺服器需要額外的服務支援
6. 更好的圖片格式
   情境：之前說到webp、bpg、sharpP等新圖片格式具有更好的壓縮比，可以使用這類新型的圖片來代替原始圖片
   原理：對圖片格式轉換，在畫質可以接受的情況下達到更好的壓縮比效果
   優勢：減少圖片載入流量，效果比較明顯
   劣勢：伺服器和瀏覽器壓力增大，而且伺服器需要額外的服務支援，格式轉換要考慮瀏覽器的相容性

三、圖片壓縮

壓縮圖片方式比較多，例如下面的部分工具平台：

Kraken (Web)

首頁： https://kraken.io/

智圖

首頁： http://zhitu.tencent.com/

支援原圖png轉為jpeg和webp(目前不支援bpg)，並提供各種壓縮比壓縮，目前在tx內部廣泛使用。

目前bpg格式圖片也有部分公司在試用。這方面也可以嘗試下。

四、小結

??上面提供了web圖片的一些格式特點和圖片最佳化的可行方案，具體的情境需要考慮選擇不同的方式來進行最佳化。當然常見的最佳化思路為：頁面靜態資源圖片使用css，canvas，svg，iconfont，sprite，base64來最佳化，後台返回的資料資源圖片則通過響應式、圖片壓縮來最佳化，同時儘可能考慮使用新的更高壓縮比的圖片來做圖片轉化。例如webp、bpg

google image rearch 連結

Tags: 前端最佳化, 圖片最佳化

web前端圖片極限最佳化策略