現在網站為了提升使用者的瀏覽體驗越來越多的使用了圖片，而這些圖片通常以 Base64 的形式儲存和載入。因此各位開發工程師肯定對 Base64 毫不陌生了，那麼你知道 Base64 究竟是什麼，為什麼要使用 Base64，以及 Base64 的優缺點嗎？
什麼是 Base64
Base64 是網路中儲存和傳輸的二進位制資料的普遍用法。Base64 一個位元組只能表示 64 種情況，且編碼格式每個位元組的前兩位都只能是 0，使用剩下的 6 位表示內容。
看到這裡相信大家也能夠意識到，這種編碼格式無法充分利用儲存資源，效能較低。那為什麼還會成為網路中的普遍用法呢？
其實 Base64 最早是應用在郵件傳輸協議中的。當時郵件傳輸協議只支援 ASCII 字元傳遞，使用 ASCII 碼來表示所有的英文字元和數字還有一些符號。這裡有一個問題，如果郵件中只傳輸英文數字等，那麼 ASCII 可以直接支援。但是如果要在檔案中傳輸圖片、視訊等資源的話，這些資源轉成 ASCII 的時候會出現非英文數字的情況。而且郵件中還存在很多控制字元，這些控制字元又會成為不可見字元。非英文字元和控制字元在傳輸過程中很容易產生錯誤，影響郵件的正確傳輸。為此才有了誕生了一個新的編碼規則，把二進位制以 3 個位元組為一組，再把每組的 3 個位元組（24 位）轉換成 4 個 6 位，每 6 位根據查表對應一個 ASCII 符號，這就是 Base64。
Base64 將 8 位為一個單元的位元組資料，拆分為 6 位為一個單元的二進位制片段。每一個 6 位單元對應 Base64 索引表中的一個字元。簡單舉個例子，下圖中 M 的 ASCII 碼是 77 , 而轉換為二進位制後前六位二進位制對應值為 19，為 Base64 字典中的 T。
當然這裡也會有一個問題，如果要編碼的二進位制資料不是 3 的倍數，那就會剩下一至二個位元組。為此 Base64 使用 000000 位元組值在末尾補足，使其位元組數能夠被 3 整除，補位用 = 表示，= 的個數可表示補了多少位元組，並在解碼時自動去除。總體來看相比編碼前，Base64 編碼後的字元增加了約 33%。
圖片的 Base64 編碼
前面我們也提到了 Base64 編碼是現在網站小圖片的主要載入方式，那 Base64 到底是如何處理圖片的呢？
我們都知道圖片在網頁中的使用方法通常是使用 img 標籤的形式，而 img 標籤的 src 屬性會指定一個遠端伺服器上的資源。在網頁載入到瀏覽器中時，瀏覽器會針對每個外部資源都向伺服器傳送一次拉取資源請求。但是這是非常佔用網路資源的，而且因為大多數瀏覽器都有併發請求數的限制，如果你的網頁中嵌入了過多外部請求，就很容易出現頁面載入速度過慢的情況。
而 Base64 編碼可以通過 Data URL 技術讓圖片以字串的格式直接嵌入頁面，與 HTML 成為一體。這樣在載入時就可以避開對外部資源的請求
為什麼選擇 Data URL
至於為什麼選擇 Data URL 技術，是因為跟傳統的外部資源引用方式相比，它擁有以下優點：
- 減少 HTTP 請求；
- 避免跨域問題；
- 可像單獨圖片一樣使用，比如背景圖片重複使用等。
通過這種方式 Base64 編碼可以更為快捷方便得對前端的各種圖片資源進行優化。我們看一個具體的例子：
可以明顯看到 Base64 編碼將一幅圖片資料編碼成一串字串，並使用該字串代替影像地址。儘管乍一眼看上去沒有任何圖片相關的內容，但它最終渲染出的毫無疑問是一張完整的圖片效果。
當然使用 Data URL 來進行 Base64 圖片編碼並不是完美的，它有著兩個不容忽視的缺點：
- Base64 編碼的資料體積通常是原資料的體積 4/3，也就是 Data URL 形式的圖片會比二進位制格式的圖片體積大 1/3
- Data URL 形式的圖片不會被瀏覽器快取
無法被瀏覽器快取也就意味著每次訪問都需要重新請求資源，這對於伺服器壓力是比較大的。那有沒有辦法，能將這些資料也放入瀏覽器快取中呢？
加快載入小技巧
其實大部分網站的背景圖構成，是一個寬高只有幾個畫素的小圖片，通過將它平鋪成為背景圖。通常我們將小圖片儲存成 GIF 或 PNG 格式，然後在 CSS 的 background-image 屬性中引用圖片地址。但是瀏覽器本身並不在意 URL裡寫的是什麼，只是需要通過它獲取需要的資料。
所以我們完全可以使用 CSS 樣式檔案，讓 Data URL 形式的圖片儲存在 CSS 樣式表中。這樣瀏覽器就會快取 CSS 檔案，也就會快取圖片，能夠進一步提高頁面載入效率。
上圖就是一個簡單的使用案例，通過這種方式既避免了讓背景圖片獨自產生一次 HTTP 請求的情況，還讓背景圖片和 CSS 檔案一起被瀏覽器快取起來，避免了每次開啟網頁都載入一次背景圖片的情況，讓改善使用者的瀏覽體驗更為快速流暢。
通過 Date URL 技術與 Base64 編碼的結合有效減少 HTTP 請求，讓使用者訪問體驗更好，這其實是我們一個開發過程中的小技巧，希望看完後能夠帶給大家一些幫助。