關於圖片的Base64編碼


什么是Base64編碼

Base64編碼是一種圖片處理格式,通過特定的算法將圖片編碼成一長串字符串,在頁面上顯示的時候,可以用該字符串來代替圖片的url屬性。

base64編碼就是長得像下面這樣子的代碼:

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代碼大家都熟悉吧,迅雷下載鏈接哦,就是base64編碼后的地址,所以以后看到這種:一堆連續字母,最后有1~2個"="的代碼就是base64。Base64編碼並不只是用在圖片處理上,還可以用在URL轉換上,比如上述我們常見的迅雷以thunder開頭的專用地址,就是通過Base64加密處理過后的URL地址。

base64:URL就是URL地址是base64編碼的。

例如下面這個:

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

 

base64與文件數據編碼

在網絡中,通過HTTP傳輸的文件還可以通過base64對數據進行編碼進行傳輸。就如上面的這個base64的gif格式圖片。當然,可以base64編碼的文件不僅僅是圖片,也可以是字體文件,例如(中間有缺省):

@font-face{

    font-family: forTest;

    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

}

自然,對於background-image圖片,我們也可以使用base64編碼進行傳輸,例如:

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

 

使用base64:URL的優缺點

base64:URL傳輸圖片文件的好處在於:

1減少了HTTP網絡請求。

我們都知道,網頁上的圖片資源如果采用http形式的url的話都會額外發送一次請求,網頁發送的http請求次數越多,會造成頁面加載速度越慢。而采用Base64格式的編碼,將圖片轉化為字符串后,圖片文件會隨着html元素一並加載,這樣就可以減少http請求的次數,對於網頁優化是一種比較好的手段。

2采用Base64編碼的圖片是隨着頁面一起加載的,不會造成跨域請求的問題。

3沒有圖片更新要重新上傳,不會造成清理圖片緩存的問題

不足在於:

1 瀏覽器支持

使用base64編碼圖片作為背景圖片的這種技術IE6/IE7瀏覽器是不支持的(IE9瀏覽器IE7模式下支持)。對於目前PC頁面,兼容性問題使沒有文件上傳以及無需更新緩存的優點不存在了。

2 增加了CSS文件的尺寸

當我們將一個只有幾KB的圖片轉化為Base64格式編碼,生成的字符串往往會大於幾KB,如果將其寫在一個css文件中,這樣一個css文件的大小會劇增,造成代碼可讀性差不說,還會造成請求傳輸的數據量遞增。

3 造成數據庫數據量的增大

如果我們將Base64位的編碼的圖片存入數據庫中,會造成數據庫數據量的增大,這樣的效果還不如將圖片存至圖片服務器,而只在數據庫中存入url字段。

 

何時使用

分析了Base64編碼的優劣,那么我們該如何正確的使用Base64編碼呢?這里總結出使用Base64編碼的幾個地方。

  • 這類圖片不能與其他圖片以CSS Sprite的形式存在,只能獨行
  • 這類圖片從誕生之日起,基本上很少被更新
  • 這類圖片的實際尺寸很小
  • 這類圖片在網站中大規模使用

對於極小或者極簡單的圖片,例如只有幾像素的圖片,不用考慮跨域問題也不想頁面的圖片緩存,果斷用base64。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM