前言：
近期研究着前端性能的優化方面的知識，並以博客記之。之前有相同系列的文章（前端性能優化--圖片懶加載(lazyload image)），這次繼續是關於圖片的處理，css sprites 和 base64 格式圖片，這兩種處理都是通過減少了http的請求來達到前端性能優化的效果，請求減少，與服務器連接次數減少，加載頁面的時間就快了，如是甚好。
Css Sprites：
介紹：
Css Sprites（雪碧圖或css精靈），是網頁圖片處理的一種方式，它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
原理：
將許多的小圖片整合到一張大圖片中，利用css中的background-image屬性，background-position屬性定位某個圖片位置，來達到在大圖片中引用某個部位的小圖片的效果。
優點：
- 減少網頁的http請求，提升網頁加載速度。
- 合並多張小圖片成大圖，能減少字節總數（大圖大小<=多張小圖大小）.
缺點：
- 前期需要處理圖片將小圖合並，多些許工程量。
- 對於需要經常改變的圖片維護起來麻煩。
應用例子：
- 生成雪碧圖：我這里使用了網頁雪碧圖制作專家，當然還有很多其他的工具
- 合成的圖片如圖所示：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css Sprites</title>
</head>
<body>
<ul class="container">
<li class="icon icon-issue"></li>
<li class="icon icon-upload"></li>
<li class="icon icon-passage"></li>
</ul>
</body>
</html>
css代碼：
.container {
overflow: hidden;
width: 50px;
height: 200px;
background-color: #faa755;
}
.icon {
margin: 0 auto;
margin-top: 20px;
width: 40px;
height: 30px;
background-image: url(icon.png);
list-style-type: none;
}
.icon-issue {
background-position: 0 0;
}
.icon-upload {
background-position: 0 -50px;
}
.icon-passage {
background-position: 0 -100px;
}
- 效果圖：
適用場景：
- 對於一些不需要多變動的小圖片，表情，標志等等都可以使用。
- 一般都是應用於小圖片，太大的圖片不利於合並，且定位麻煩，一次的加載時間長，導致全部圖片出現時間延遲，效果不友好。
base64：
介紹：
base64是網絡上最常見的用於傳輸8Bit字節代碼的編碼方式之一，要求把每三個8Bit的字節轉換為四個6Bit的字節，Base64是網絡上最常見的用於傳輸8Bit字節代碼的編碼方式之一。
通俗點講：將資源原本二進制形式轉成以64個字符基本單位，所組成的一串字符串。
比如一張圖片轉成base64編碼后就像這樣，圖片直接以base64形式嵌入文件中（很長沒截完）：
生成base64編碼：
圖片生成base64可以用一些工具，如在線工具，但在項目中這樣一個圖片這樣生成是挺繁瑣。
特別說下，webpack中的url-loader可以完成這個工作，可以對限制大小的圖片進行base64的轉換，非常方便。
優點：
- base64的圖片會隨着html或者css一起下載到瀏覽器,減少了請求.
- 可避免跨域問題
缺點：
- 老東西（低版本）的IE瀏覽器不兼容。
- 體積會比原來的圖片大一點。
- css中過多使用base64圖片會使得css過大，不利於css的加載。
適用場景：
- 應用於小的圖片幾k的，太大的圖片會轉換后的大小太大，得不償失。
- 用於一些css sprites不利處理的小圖片，如一些可以通過background-repeat平鋪來做成背景的圖片。
最后收收尾：
上面說的兩個處理圖片共同點是都是應用於小圖片，都能減少請求數，但並不是所有的圖片都適用，尺寸大的圖片就不應使用。
兩種方式都有利有弊，應該適應場景使用，權衡利弊，方可將這兩種方法能力發揮好。