Css Sprites

Css Sprites我們叫做雪碧圖或者css精靈，其原理就是將許多小的圖片合到一張大的圖片中，然後使用background-image引用圖片，使用background-position來定位小圖片在大圖片中的具體位置，實現大圖片中引用某個位置的小圖片。

優點

①減少頁面的http請求

②降低字節數，多張小圖大小總和大於一張大圖的

缺點

①圖片合並處理耗費時間，相對麻煩

②如果頁面頻繁更改圖片，後期維護會比較麻煩

Base64

Base64是網絡上最常見的用於傳輸8Bit字節代碼的編碼方式之一，可用於在HTTP環境下傳遞較長的標識信息，Base64編碼是從二進制到字符的過程。可以使用一些在線的工具來將圖片生成Base64，不過這樣相對麻煩。我們可以使用webpack的圖片loader，就是url-loader來執行這個過程，對超過一定大小的圖片進行Base64轉換。如下形式：

對於JPG格式的圖片，每加載一張圖片就相當於發送一個HTTP請求，圖片如果一多，性能消耗就會非常大，Base64的圖片是文本格式，可以直接放在html或者css中，同被訪問頁面一起下載到瀏覽器中，這樣就減少了HTTP請求。Base64適用於幾k大小的圖片，如果圖片太大，編碼之後字符數太多，會大大增加了css文件大小，並沒有得到優化。

優點

①減少了http請求

②一些文件可以避免跨域問題

③使用Base64時，避免當圖片更新之後要重新上傳而進行的緩存清理

缺點

①使用Base64編碼圖片作為背景圖片在IE6/IE7瀏覽器中是不支持的

②增加css文件的大小，因為圖片進行Base64編碼後是完全嵌入到css文件中的

文中如有錯誤之處，歡迎大家指出更正！

前端性能優化------------圖片處理Css Sprites&Base64