網頁上的圖片資源如果采用 http 形式的 url 的話都會額外發送一次請求，網頁發送的 http 請求次數越多，會造成頁面加載速度越慢。而采用Base64格式的編碼，將圖片轉化為字符串後，圖片文件會隨著 html 元素一並加載，這樣就可以減少 http 請求的次數，對於網頁優化是一種比較好的手段。

　　當我們將一個只有幾KB的圖片轉化為Base64格式編碼，根據 Base64 的編碼原理，大小比原文件大小大 1/3。如果將其寫在一個 CSS 文件中，這樣一個 CSS 文件的大小會劇增，造成代碼可讀性差不說，還會造成請求傳輸的數據量遞增。Base64 無法緩存，要緩存只能緩存包含 Base64 的文件，比如 HTML 或者 CSS，這相比直接緩存圖片要弱很多，一般 HTML 會改動頻繁，所以等同於得不到緩存效益。精靈圖可能是更好地方案。

　　所以我們一般對於極小或者極簡單的圖片使用 Base64，例如只有幾像素的圖片不用考慮跨域問題不想頁面的圖片緩存。

//html中使用
<img src="data:image/png;base64,/9j/4AAQSkZJRg...>
//css中使用
.test{background:url(data:image/png;base64,/9j/4AAQSkZJRg...)} 

圖片處理之 Base64