關於圖片的Base64編碼

什麼是Base64編碼

Base64編碼是一種圖片處理格式，經過特定的算法將圖片編碼成一長串字符串，在頁面上顯示的時候，能夠用該字符串來代替圖片的url屬性。

base64編碼就是長得像下面這樣子的代碼：

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代碼你們都熟悉吧，迅雷下載連接哦，就是base64編碼後的地址，因此之後看到這種：一堆連續字母，最後有1~2個"="的代碼就是base64。Base64編碼並不僅是用在圖片處理上，還能夠用在URL轉換上，好比上述咱們常見的迅雷以thunder開頭的專用地址，就是經過Base64加密處理事後的URL地址。

base64:URL就是URL地址是base64編碼的。

例以下面這個：

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

 

base64與文件數據編碼

在網絡中，經過HTTP傳輸的文件還能夠經過base64對數據進行編碼進行傳輸。就如上面的這個base64的gif格式圖片。固然，能夠base64編碼的文件不單單是圖片，也能夠是字體文件，例如(中間有缺省)：

@font-face{

    font-family: forTest;

    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

}

天然，對於background-image圖片，咱們也可使用base64編碼進行傳輸，例如：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

 

使用base64:URL的優缺點

base64:URL傳輸圖片文件的好處在於：

1減小了HTTP網絡請求。

咱們都知道，網頁上的圖片資源若是採用http形式的url的話都會額外發送一次請求，網頁發送的http請求次數越多，會形成頁面加載速度越慢。而採用Base64格式的編碼，將圖片轉化爲字符串後，圖片文件會隨着html元素一併加載，這樣就能夠減小http請求的次數，對於網頁優化是一種比較好的手段。

2採用Base64編碼的圖片是隨着頁面一塊兒加載的，不會形成跨域請求的問題。

3沒有圖片更新要從新上傳，不會形成清理圖片緩存的問題

不足在於：

1 瀏覽器支持

使用base64編碼圖片做爲背景圖片的這種技術IE6/IE7瀏覽器是不支持的（IE9瀏覽器IE7模式下支持）。對於目前PC頁面，兼容性問題使沒有文件上傳以及無需更新緩存的優勢不存在了。

2 增長了CSS文件的尺寸

當咱們將一個只有幾KB的圖片轉化爲Base64格式編碼，生成的字符串每每會大於幾KB，若是將其寫在一個css文件中，這樣一個css文件的大小會劇增，形成代碼可讀性差不說，還會形成請求傳輸的數據量遞增。

3 形成數據庫數據量的增大

若是咱們將Base64位的編碼的圖片存入數據庫中，會形成數據庫數據量的增大，這樣的效果還不如將圖片存至圖片服務器，而只在數據庫中存入url字段。

 

什麼時候使用

分析了Base64編碼的優劣，那麼咱們該如何正確的使用Base64編碼呢？這裏總結出使用Base64編碼的幾個地方。

• 這類圖片不能與其餘圖片以CSS Sprite的形式存在，只能獨行
• 這類圖片從誕生之日起，基本上不多被更新
• 這類圖片的實際尺寸很小
• 這類圖片在網站中大規模使用

對於極小或者極簡單的圖片，例如只有幾像素的圖片，不用考慮跨域問題也不想頁面的圖片緩存，果斷用base64。