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平鋪來做成背景的圖片