Base64編碼是一種圖片處理格式,通過特定的算法將圖片編碼成一長串字符串,在頁面上顯示的時候,可以用該字符串來代替圖片的url屬性。
我們可以來看一下實際的效果
Base64編碼效果
在上圖中,我們可以看出img的src屬性開頭是data:image/png;base64,這種開頭表示的就是Base64編碼后的圖片格式,鼠標放在src屬性上,可以看出實際的圖片。
圖片采用Base64編碼后的字符串非常長,這里截取一部分來看下效果
Base64編碼的部分字符串
真實的全部字符串會比這長的多,可能達到幾十KB
當然,Base64編碼並不只是用在圖片處理上,還可以用在URL轉換上,比如說我們常見的迅雷以thunder開頭的專用地址,就是通過Base64加密處理過后的URL地址,如下圖所示
Base64處理后的URL
為何使用Base64編碼
存在及必然,那么我們為什么要使用Base64編碼呢?
1.其中很重要的一點就是,使用Base64編碼可以減少網絡請求。
我們都知道,網頁上的圖片資源如果采用http形式的url的話都會額外發送一次請求,網頁發送的http請求次數越多,會造成頁面加載速度越慢。而采用Base64格式的編碼,將圖片轉化為字符串后,圖片文件會隨着html元素一並加載,這樣就可以減少http請求的次數,對於網頁優化是一種比較好的手段。
2.采用Base64編碼的圖片是隨着頁面一起加載的,不會造成跨域請求的問題。
3.不會造成清理圖片緩存的問題
Base64編碼劣勢
Base64編碼既有優勢也有劣勢,上述已經說了Base64編碼的優勢,接下來看看劣勢。
1.當我們將一個只有幾KB的圖片轉化為Base64格式編碼,生成的字符串往往會大於幾KB,如果將其寫在一個css文件中,這樣一個css文件的大小會劇增,造成代碼可讀性差不說,還會造成請求傳輸的數據量遞增。
2.如果我們將Base64位的編碼的圖片存入數據庫中,會造成數據庫數據量的增大,這樣的效果還不如將圖片存至圖片服務器,而只在數據庫中存入url字段。
3.對於IE8以下的瀏覽器,不支持data url格式,IE8開始支持data url,卻對大小作出了限制,在使用時不是很方便。
如何使用
分析了Base64編碼的優劣,那么我們該如何正確的使用Base64編碼呢?這里總結出使用Base64編碼的幾個地方。
對於極小或者極簡單的圖片,例如只有幾像素的圖片不用考慮跨域問題不想頁面的圖片緩存