什麼是Base64

base64是一種基於64個可列印字元表示二進位制資料的編碼方式，是從二進位制資料到字元的過程。原則上，計算機中所有內容都是二進位制形式儲存的，所以所有內容（包括文字、影音、圖片等）都可以使用base64來表示。

Base編碼原理

Base64編碼之所以稱為Base64，是因為其使用64個字元來對任意資料進行編碼，同理有Base32、Base16編碼。標準Base64編碼使用的64個字元為：

有點特殊的是最後兩個字元，因對最後兩個字元的選擇不同，Base64編碼又有很多變種，比如用於編碼URL的Base64 URL編碼。

Base64編碼本質上是一種將二進位制資料轉成文字資料的方案。對於非二進位制資料，是先將其轉換成二進位制形式，然後每連續6位元（2的6次方=64）計算其十進位制值，根據該值在上面的索引表中找到對應的字元，最終得到一個文字字串。

假設我們要對 Hello! 進行Base64編碼，按照ASCII表，其轉換過程如下圖所示：

可知 Hello! 的Base64編碼結果為 SGVsbG8h，每3個原始字元經Base64編碼成4個字元。那麼，當原始字串長度不能被3整除時，怎麼辦呢？

以 Hello!! 為例，其轉換過程為：

Hello!! Base64編碼的結果為 SGVsbG8hIQAA。可見，不能被3整除時會採用來來補0的方式來完成編碼。
需要注意的是：標準Base64編碼通常用 = 字元來替換最後的 A，即編碼結果為 SGVsbG8hIQ==。因為 = 字元並不在Base64編碼索引表中，其意義在於結束符號，在Base64解碼時遇到 = 時即可知道一個Base64編碼字串結束。

Base64編碼應用

就前端而言，對於一些簡單的圖片，為了減少外部資源載入，降低頁面載入時間，可以採用base64將圖片編碼成字串，直接內嵌到頁面中。這種內嵌方式的實現，得益於大部分瀏覽器對Data URI scheme特性的支援，該特性通常會在CSS設定背景圖片時用到，其格式為：
background:url(data:檔案型別;編碼方式,編碼後的檔案內容);
也可通過img標籤嵌入圖片：
<img alt="base64 image" src="data:檔案型別;編碼方式,編碼後的檔案內容" />

適用場景

一般適用於比較小、色彩層次單一的圖片（如icon圖示），不要試圖用於色彩豐富的較大圖片，儘管能夠實現展現，但由於編碼後的字串非常大，會明顯增大HTML/CSS檔案的大小，影響載入速度。