淺析 base64 處理圖片

　　Base64是一種用64個字符來表示任意二進制數據的方法；

　　在網絡中，base64編碼後的文件能夠經過http協議傳輸，所以咱們常看到base64編碼後的圖片；好比：

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

　　這種圖片加載方式，就是咱們常常看到的通過base64編碼後的圖片文件；

 

如何將圖片進行base64編碼？

　　如今有不少在線工具，方便前端開發人員將圖片轉成base64編碼的文件；

　　這裏提供一種在線工具：圖片轉BASE64編碼

 

如何使用base64編碼後的圖片文件？

　　Base64格式

data:[][;charset=][;base64],

 

　　Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

 

　　Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

　　特別注意：

　　　　在使用的時候，儘可能在css文件中使用base64編碼的圖片，由於css文件能夠進行瀏覽器緩存，而html文件不能被瀏覽器緩存；有了緩存，就能夠減小沒必要要的http請求；

 使用base64編碼圖片的適用場景 && 優缺點

　　適用場景：

　　　　1.有些做爲背景的圖片，但又能製做成css sprite

　　　　2.轉換成base64編碼後體積不是太大的時候，適合小型圖片，好比logo等

　　優勢：

　　　　1.減小http請求

　　　　2.放在css中使用的，能夠利用緩存，從而減小http請求

　　缺點：

　　　　1.部分瀏覽器不支持(IE)

　　　　2.base64後的圖片比較大，會增長插入文件的體積

　　　　3.圖片完成後還須要base64編碼，目前估計手工完成的多，所以，增長了必定的工做量，雖然很少

 

參考：(優質的文檔可以準確，快速地理解掌握知識點；感謝如下文檔)

[1] 小tip:base64:URL背景圖片與web頁面性能優化