網頁圖片利用base64優化加載

前言

最近做一個要加載30多張圖片的頁面，因爲圖片多導致產生大量的http請求，從而影響頁面的加載速度，而且有加載不出來的情況，最後利用base64解決問題。
Base64是網絡上最常見的用於傳輸8Bit字節碼的編碼方式之一，Base64就是一種基於64個可打印字符來表示二進制數據的方法。

具體步驟

1.HTML標籤

 <img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////  
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML  
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="/> 

data表示取得數據的協定名稱，image/gif 是數據類型名稱，base64 是數據的編碼方法，逗號後面就是這個image/png文件base64編碼後的數據。

2.css樣式

.picture{
    width: 600px;
    height: 300px;
    background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}

3.後臺處理（import org.apache.commons.codec.binary.Base64;）

byte[] is = ...;
String s = new String(Base64.encodeBase64(is));

後臺將圖片的byte數組用base64編碼後，轉成字符串傳遞到前端放到對應位置即可。

後記

這種加載圖片的方式提升了網頁的加載速度，但是瀏覽器不會緩存這種圖片。