現在網站為了提升用戶的瀏覽體驗越來越多的使用了圖片，而這些圖片通常以 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 到底是如何處理圖片的呢？
我們都知道圖片在網頁中的使用方法通常是使用 img 標簽的形式，而 img 標簽的 src 屬性會指定壹個遠程服務器上的資源。在網頁加載到瀏覽器中時，瀏覽器會針對每個外部資源都向服務器發送壹次拉取資源請求。但是這是非常占用網絡資源的，而且因為大多數瀏覽器都有並發請求數的限制，如果妳的網頁中嵌入了過多外部請求，就很容易出現頁面加載速度過慢的情況。
而 Base64 編碼可以通過 Data URL 技術讓圖片以字符串的格式直接嵌入頁面，與 HTML 成為壹體。這樣在加載時就可以避開對外部資源的請求
為什麽選擇 Data URL
至於為什麽選擇 Data URL 技術，是因為跟傳統的外部資源引用方式相比，它擁有以下優點：
通過這種方式 Base64 編碼可以更為快捷方便得對前端的各種圖片資源進行優化。我們看壹個具體的例子：
可以明顯看到 Base64 編碼將壹幅圖片數據編碼成壹串字符串，並使用該字符串代替圖像地址。盡管乍壹眼看上去沒有任何圖片相關的內容，但它最終渲染出的毫無疑問是壹張完整的圖片效果。
當然使用 Data URL 來進行 Base64 圖片編碼並不是完美的，它有著兩個不容忽視的缺點：
無法被瀏覽器緩存也就意味著每次訪問都需要重新請求資源，這對於服務器壓力是比較大的。那有沒有辦法，能將這些數據也放入瀏覽器緩存中呢？
加快加載小技巧
其實大部分網站的背景圖構成，是壹個寬高只有幾個像素的小圖片，通過將它平鋪成為背景圖。通常我們將小圖片保存成 GIF 或 PNG 格式，然後在 CSS 的 background-image 屬性中引用圖片地址。但是瀏覽器本身並不在意 URL裏寫的是什麽，只是需要通過它獲取需要的數據。
所以我們完全可以使用 CSS 樣式文件，讓 Data URL 形式的圖片存儲在 CSS 樣式表中。這樣瀏覽器就會緩存 CSS 文件，也就會緩存圖片，能夠進壹步提高頁面加載效率。
上圖就是壹個簡單的使用案例，通過這種方式既避免了讓背景圖片獨自產生壹次 HTTP 請求的情況，還讓背景圖片和 CSS 文件壹起被瀏覽器緩存起來，避免了每次打開網頁都加載壹次背景圖片的情況，讓改善用戶的瀏覽體驗更為快速流暢。
通過 Date URL 技術與 Base64 編碼的結合有效減少 HTTP 請求，讓用戶訪問體驗更好，這其實是我們壹個開發過程中的小技巧，希望看完後能夠帶給大家壹些幫助。