一、base64百科

Base64是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一，可用于在HTTP環(huán)境下傳遞較長的標識信息。

某人： 唉，我徹底廢柴了，為何上面明明是中文，灑家卻看不懂嘞，為什么？

好吧，我也不喜歡專業(yè)術語的解釋。你只要知道，base64編碼就是長得像下面這樣子的代碼：

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代碼大家都熟悉吧，迅雷下載鏈接哦（咳咳，該地址很純潔），就是base64編碼后的地址，所以以后看到這種：一堆連續(xù)字母，最后有1~2個“=”的代碼就是base64。

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

例如下面這個：

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

二、base64與文件數(shù)據(jù)編碼

在網(wǎng)絡中，通過HTTP傳輸?shù)奈募�還可以通過base64對數(shù)據(jù)進行編碼進行傳輸。就如上面的這個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編碼作為background-image圖片就是本文要著重闡述的。

三、如何獲得圖片的base64編碼

其實在我之前“基于HTML5的可預覽多圖片Ajax上傳”以及“zSlide-基于CSS3/HTML5演示文檔jQuery插件”實際上就與圖片的base64編碼的獲取打過交道了。如下本地圖片轉(zhuǎn)換成可預覽的base64編碼的核心腳本：

var reader = new FileReader(), htmlImage;

reader.onload = function(e) {

htmlImage = '<img src="'+ e.target.result +'" />'; // 這里e.target.result就是base64編碼

}

reader.readAsDataURL(file);

上面說的你只需要了解，實際上，目前base64編碼工具不少，對于我們前端制作，下面這個本地圖片 base64編碼獲取頁面是值得推薦的：Encode Data URL By PuterJam

直接將桌面圖片拖到條條里就有了響應的background-image url屬性可用的base64地址了：

該轉(zhuǎn)換頁面的原理就是上面所說的HTML5 文件本地預覽原理，具體可以自己查閱資料。

四、使用base64:URL的優(yōu)缺點

個人覺得base64:URL傳輸圖片文件的好處在于：

1.減少了HTTP請求

2.某些文件可以避免跨域的問題

3.沒有圖片更新要重新上傳，還要清理緩存的問題

不足在于：

1.瀏覽器支持

使用base64編碼圖片作為背景圖片的這種技術IE6/IE7瀏覽器是不支持的（IE9瀏覽器IE7模式下支持，這里被@前端的那點破事鄙視了 ）。對于目前PC頁面，兼容性問題使沒有文件上傳以及無需更新緩存的優(yōu)點不存在了。

2.增加了CSS文件的尺寸

base64編碼圖片本質(zhì)上是將圖片的二進制大小以一些字母的形式展示，例如一個1024字節(jié)的圖片，base64編碼后至少1024個字符，這個大小會被完全嵌入到CSS文件中（不過幸運的是也可以被gzip了，而圖片文件被gzip效果不明顯）。

3.編碼成本

圖片完成后還需要base64編碼，目前估計手工完成的多，因此，增加了一定的工作量，雖然不多。

標簽： URL優(yōu)化 背景圖片優(yōu)化 web頁面優(yōu)化 

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。