現在網站爲了提升用戶的瀏覽體驗越來越多的使用了圖片，而這些圖片通常以 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 請求，讓用戶訪問體驗更好，這其實是我們一個開發過程中的小技巧，希望看完後能夠帶給大家一些幫助。