前端圖片優化

在現代互聯網整個網站中，圖片已經成爲每一個網站的側重點。據統計，圖片內容已經佔到了互聯網內容總量的62%，也就是說超過一半的流量和時間都用來下載圖片。因此圖片也絕對是成爲性能優化的熱點和重點之一。從谷歌公司的PageSpeed來看，就把圖片優化做爲重要的優化手段。下面來闡述一下Web圖片優化的方方面面。

記得以前在一個地方看到一句話很是正確：

 圖片優化既是一門藝術，也是一門科學，圖片優化是一門藝術，是由於單個圖片的壓縮不存在最好的特定性方案，而圖片優化之因此是一門科學，是由於許多開發得很出色的方法和算法能夠明顯減少圖片的大小。要找到圖片的最優設置，須要按照許多維度進行認真分析：格式能力、編碼數據內容、像素尺寸等。

---

圖片真的有那麼重要嗎？

在當前這個瀏覽器和Web標準的發展速度極快的時代，不少特效（漸變、陰影、圓角等等）均可以用純粹的HTML、CSS、SVG等加以實現，實現這些效果少則寥寥數行代碼，多則加載額外的庫（一張普通的照片比很是強大的效果庫也大了許多）。這些效果不但須要的空間很小，並且在多設備、多分辨率下都能很好的工做，在低級瀏覽器上也能夠實現較好的功能降級。所以在存在備選技術的狀況下，應該首先選擇這些技術，只有在不得不使用圖片的時候才加入真正的圖片。

---

 圖片格式的選擇

 

圖片格式	壓縮方式	透明度	動畫	瀏覽器兼容	適應場景
JPEG	有損	不支持	不支持	全部	全部通用場景
PNG	無損	支持	不支持	全部	須要透明時
GIF	無損	支持	支持	全部	簡單顏色，動畫
SVG	無損	支持	支持	全部(IE8以上)	簡單圖形，須要良好的放縮體驗，須要動態控制圖片特效
APNG	無損	支持	支持	Firefox，Safari，iOS Safari	須要半透明效果的動畫
WebP	有損	支持	支持	Chrome、Opera	複雜顏色及形狀，瀏覽器平臺可預知

幾種文件格式的選用依據

1.顏色豐富的照片，JPG是通用的選擇 

2.若是須要較通用的動畫，GIF是惟一可用的選擇 

3.若是圖片由標準的幾何圖形組成，或須要使用程序動態控制其顯示特效，能夠考慮SVG格式 

4.若是須要清晰的顯示顏色豐富的圖片，PNG比較好

前端的圖片優化方案

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.壓縮圖片 場景：在不得不加載圖片的前提下，要進一步提高優化效果，只能經過有損或無損壓縮來減小圖片的大小， 原理：對圖片進行無損、有損壓縮或格式轉換，轉爲壓縮後圖片或壓縮率更高的圖片格式來實現 優點：減小圖片加載流量，效果比較明顯 劣勢：服務器和瀏覽器壓力增大，並且服務器須要額外的服務支持，格式轉換要考慮瀏覽器的兼容性。

關於圖片壓縮

1. Kraken (Web) 主頁：https://kraken.io/

在免費模式下能夠上傳圖片，優化後打包下載，固然你有須要也能夠選擇了它的收費服務，效果很好。

2. 智圖 (Web)

支持原圖png轉爲jpeg和webp(目前不支持bpg)，並提供各類壓縮比壓縮，目前在tx內部普遍使用。