小tip: base64:URL背景圖片與web頁面效能最佳化

標籤：style   blog   http   io   ar   color   os   使用   sp   

轉自：http://www.zhangxinxu.com/wordpress/?p=2341

一、base64百科

Base64是網路上最常見的用於傳輸8Bit位元組代碼的編碼方式之一，可用於在HTTP環境下傳遞較長的標識資訊。

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

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

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

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編碼作為background-image圖片就是本文要著重闡述的。

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

其實在我之前“基於HTML5的可預覽多圖片Ajax上傳”以及“zSlide-基於CSS3/HTML5示範文檔jQuery外掛程式”實際上就與圖片的base64編碼的擷取打過交道了。如下本地圖片轉換成可預覽的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地址了：

該轉換頁面的原理就是上面所說的HTML5 檔案本地預覽原理，具體可以自己查閱資料。

四、使用base64:URL的優缺點

個人覺得base64:URL傳輸圖片檔案的好處在於：

1. 減少了HTTP請求
2. 某些檔案可以避免跨域的問題
3. 沒有圖片更新要重新上傳，還要清理緩衝的問題

不足在於：

1. 瀏覽器支援
   使用base64編碼圖片作為背景圖片的這種技術IE6/IE7瀏覽器是不支援的（IE9瀏覽器IE7模式下支援，這裡被@前端的那點破事鄙視了 ）。對於目前PC頁面，相容性問題使沒有檔案上傳以及無需更新緩衝的優點不存在了。
2. 增加了CSS檔案的尺寸
   base64編碼圖片本質上是將圖片的二進位大小以一些字母的形式展示，例如一個1024位元組的圖片，base64編碼後至少1024個字元，這個大小會被完全嵌入到CSS檔案中（不過幸運的是也可以被gzip了，而圖片檔案被gzip效果不明顯）。
3. 編碼成本
   圖片完成後還需要base64編碼，目前估計手工完成的多，因此，增加了一定的工作量，雖然不多。

五、優缺點權衡下的實際應用價值

權衡上面所展示的優缺點，貌似base64:URL圖片沒有什麼用武之地啊，實際上非也，有一種情況時有base64編碼作為background-image背景圖片利要遠大於弊的。何種情況呢？

在web頁面製作的時候，由於某些現實原因，我們可以會用到下面這一類圖片：

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

想想看，你的網站中有沒有同時滿足上面四條的背景圖片呢？

//zxx: 假設已經過去了今天朝鮮火箭勃起的時間

怎樣，想到了沒？提點下，例如下面這個企鵝微博中的loading gif圖片(537位元組，勉強算是)：

537位元組的大小實際上還是偏大了點，讓我們看個更better的例子，大家可以去豆瓣首頁，可以看到所示的垂直線：

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

從bg_line.png這樣的命名可以預知（不是：home_bg_line.png），該背景圖片會在（可以在）網站中多處使用。

圖示平鋪圖片地址為：http://img3.douban.com/pics/bg_line.png

大小1 * 1 像素，png格式，大小88位元組。//zxx: 當圖片顏色簡單到一定程度的時候，gif格式圖片大小要小於png8, 所以，這個點如果儲存成gif格式，只需要43位元組，為png一半大小

像這種圖片大小極小，但又佔據了一次HTTP請求，同時不能與其他背景圖片Sprite，而網站很多地方都使用。因此，沒有什麼背景圖片比這個更適合使用本文的“base64:URL圖片”技術進行最佳化了！

為了比對最佳化的好處，我們來看個實際的demo.

六、base64:URL圖片的實際應用

我部落格首頁的個人資訊介紹處的虛點是使用背景圖片實現的（考慮到IE6 dot邊框跟dashed搞基，不同瀏覽器虛點間距差異等）。

現在，demo就要展示如何使用base64:URL圖片實現該虛點效果。

您可以狠狠地點擊這裡：base64 URL虛點背景demo

相關CSS代碼如下：

.dot {    background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);   *background-image: url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/zxx_dotted.gif);    // IE6~IE7    background-repeat: repeat-x;    background-position: left bottom;}

可以看到，使用base64的CSS代碼量基本上跟下面使用完整地址差不多，因此，對於一些級小尺寸圖片，所謂增加CSS檔案大小的不足可以忽略（再考慮到gzip），同時減少了1個HTTP請求，加上這個圖片網站很多地方使用，因此，累積節約的HTTP請求就很驚人了。

當然，唯一美中不足的是，對於IE6~IE7瀏覽器不能享受到這種“百利僅一害”的最佳化技術，我們還需要專門為它們擦屁股。不過，權衡來看，還是很值得的，畢竟目前，在中國IE8瀏覽器是大頭（就在最近），IE6, IE7 就乖乖地瀉下去吧~~

最後，展示下demo頁面YSLOW分析圖吧，可以看到，沒有任何CSS background-image請求~~

七、雖是一篇小短文，結尾也要乾爹疼

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

再次提醒下，使用base64編碼代替CSS背景圖片是有局限性的，並不是所有圖片都適合使用base64編碼這種技術的。例如：
1. CSS Sprite圖片後期維護會死人，只能是獨立圖片
2. 圖片尺寸過大，CSS檔案就會變成了臃腫的大棒子，反而不利於載入
3. CSS檔案的優點就是重用，因此，如果背景圖片就一個地方使用，減少的請求數有限，考慮到其他成本，還不如直接使用普通url圖片地址
4. 如果圖片經常改動，好吧，哥們，苦逼的前端加班仔中就多了一個你

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

在微博上，@樸靈提過MHTML這個東東，好像與base64編碼相關的，對此我幾乎一無所知，希望有相關瞭解的人可以補充下。

另外，周末時節，想著明早可以睡到自然醒，文筆過於倉促，出現錯誤在所難免，文中有表述不準確的地方歡迎指正，感謝閱讀，祝大家周末快樂！

小tip: base64:URL背景圖片與web頁面效能最佳化