網(wǎng)站性能優(yōu)化:base64:URL傳輸圖片文件

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

一、base64百科

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

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

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

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

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

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

例如下面這個(gè)：

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

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

在網(wǎng)絡(luò)中，通過HTTP傳輸?shù)奈募€可以通過base64對(duì)數(shù)據(jù)進(jìn)行編碼進(jìn)行傳輸。就如上面的這個(gè)base64的gif格式圖片。當(dāng)然，可以base64編碼的文件不僅僅是圖片，也可以是字體文件，例如（中間有缺?。?/p>

@font-face{

font-family: forTest;

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

}

自然，對(duì)于background-image圖片，我們也可以使用base64編碼進(jìn)行傳輸，例如：

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

而使用base64編碼作為background-image圖片就是本文要著重闡述的。

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

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

var reader = new FileReader(), htmlImage;

reader.onload = function(e) {

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

}

reader.readAsDataURL(file);

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

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

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

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

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

1.減少了HTTP請(qǐng)求

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

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

不足在于：

1.瀏覽器支持

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

2.增加了CSS文件的尺寸

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

3.編碼成本

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

五、優(yōu)缺點(diǎn)權(quán)衡下的實(shí)際應(yīng)用價(jià)值

權(quán)衡上面所展示的優(yōu)缺點(diǎn)，貌似base64:URL圖片沒有什么用武之地啊，實(shí)際上非也，有一種情況時(shí)有base64編碼作為background-image背景圖片利要遠(yuǎn)大于弊的。何種情況呢？

在web頁面制作的時(shí)候，由于某些現(xiàn)實(shí)原因，我們可以會(huì)用到下面這一類圖片：

1.這類圖片不能與其他圖片以CSS Sprite的形式存在，只能獨(dú)行

2.這類圖片從誕生之日起，基本上很少被更新

3.這類圖片的實(shí)際尺寸很小

4.這類圖片在網(wǎng)站中大規(guī)模使用

想想看，你的網(wǎng)站中有沒有同時(shí)滿足上面四條的背景圖片呢？

//zxx： 假設(shè)已經(jīng)過去了今天朝鮮火箭勃起的時(shí)間

怎樣，想到了沒？提點(diǎn)下，例如下面這個(gè)企鵝微博中的loading gif圖片（537字節(jié)，勉強(qiáng)算是）：

537字節(jié)的大小實(shí)際上還是偏大了點(diǎn)，讓我們看個(gè)更better的例子，大家可以去豆瓣首頁，可以看到下圖所示的垂直線：

為background-image圖片（for 等高布局）：

從bg_line.png這樣的命名可以預(yù)知（不是：home_bg_line.png），該背景圖片會(huì)在（可以在）網(wǎng)站中多處使用。

圖示平鋪圖片地址為：http://upload.chinaz.com/2012/0606/1338961513462.png

大小1 * 1 像素，png格式，大小88字節(jié)。//zxx： 當(dāng)圖片顏色簡單到一定程度的時(shí)候，gif格式圖片大小要小于png8， 所以，這個(gè)點(diǎn)如果保存成gif格式，只需要43字節(jié)，為png一半大小

像這種圖片大小極小，但又占據(jù)了一次HTTP請(qǐng)求，同時(shí)不能與其他背景圖片Sprite，而網(wǎng)站很多地方都使用。因此，沒有什么背景圖片比這個(gè)更適合使用本文的“base64:URL圖片”技術(shù)進(jìn)行優(yōu)化了！

為了比對(duì)優(yōu)化的好處，我們來看個(gè)實(shí)際的demo.

六、base64:URL圖片的實(shí)際應(yīng)用

我博客首頁的個(gè)人信息介紹處的虛點(diǎn)是使用背景圖片實(shí)現(xiàn)的（考慮到IE6 dot邊框跟dashed搞基，不同瀏覽器虛點(diǎn)間距差異等）。

現(xiàn)在，demo就要展示如何使用base64:URL圖片實(shí)現(xiàn)該虛點(diǎn)效果。

您可以狠狠地點(diǎn)擊這里：base64 URL虛點(diǎn)背景demo

相關(guān)CSS代碼如下：

.dot {

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

*background-image: url("http://upload.chinaz.com/2012/0606/1338961513409.gif"); // IE6~IE7

background-repeat: repeat-x;

background-position: left bottom;

}

可以看到，使用base64的CSS代碼量基本上跟下面使用完整地址差不多，因此，對(duì)于一些級(jí)小尺寸圖片，所謂增加CSS文件大小的不足可以忽略（再考慮到gzip），同時(shí)減少了1個(gè)HTTP請(qǐng)求，加上這個(gè)圖片網(wǎng)站很多地方使用，因此，累積節(jié)約的HTTP請(qǐng)求就很驚人了。

當(dāng)然，唯一美中不足的是，對(duì)于IE6~IE7瀏覽器不能享受到這種“百利僅一害”的優(yōu)化技術(shù)，我們還需要專門為它們擦屁股。不過，權(quán)衡來看，還是很值得的，畢竟目前，在中國IE8瀏覽器是大頭（就在最近），IE6，IE7 就乖乖地瀉下去吧。

最后，展示下demo頁面YSLOW分析圖吧，可以看到，沒有任何CSS background-image請(qǐng)求。

七、雖是一篇小短文，結(jié)尾也要干爹疼

IE6/IE7又一次暴露了自己的屌絲形象，對(duì)其，我已無力再次吐槽，不過，畢竟歷史長河中的有功之人，就等其靜靜退出歷史舞臺(tái)吧。

再次提醒下，使用base64編碼代替CSS背景圖片是有局限性的，并不是所有圖片都適合使用base64編碼這種技術(shù)的。例如：

1. CSS Sprite圖片后期維護(hù)會(huì)死人，只能是獨(dú)立圖片

2. 圖片尺寸過大，CSS文件就會(huì)變成了臃腫的大棒子，反而不利于加載

3. CSS文件的優(yōu)點(diǎn)就是重用，因此，如果背景圖片就一個(gè)地方使用，減少的請(qǐng)求數(shù)有限，考慮到其他成本，還不如直接使用普通url圖片地址

4. 如果圖片經(jīng)常改動(dòng)，好吧，哥們，苦逼的前端加班仔中就多了一個(gè)你

因此，技術(shù)本身雖好，需天時(shí)地利人和方可使用。

在微博上，@樸靈提過MHTML這個(gè)東東，好像與base64編碼相關(guān)的，對(duì)此我?guī)缀跻粺o所知，希望有相關(guān)了解的人可以補(bǔ)充下。

另外，周末時(shí)節(jié)，想著明早可以睡到自然醒，文筆過于倉促，出現(xiàn)錯(cuò)誤在所難免，文中有表述不準(zhǔn)確的地方歡迎指正，感謝閱讀，祝大家周末快樂！

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明：張鑫旭-鑫空間-鑫生活