|
一、base64百科 Base64是網絡上最常見的用于傳輸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與文件數據編碼 在網絡中，通過HTTP傳輸的文件還可以通過base64對數據進行編碼進行傳輸。就如上面的這個base64的gif格式圖片。當然，可以base64編碼的文件不僅僅是圖片，也可以是字體文件，例如（中間有缺?。?/p> @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的優(yōu)缺點 個人覺得base64:URL傳輸圖片文件的好處在于： 1.減少了HTTP請求 2.某些文件可以避免跨域的問題 3.沒有圖片更新要重新上傳，還要清理緩存的問題 不足在于： 1.瀏覽器支持 使用base64編碼圖片作為背景圖片的這種技術IE6/IE7瀏覽器是不支持的（IE9瀏覽器IE7模式下支持，這里被@前端的那點破事鄙視了 ）。對于目前PC頁面，兼容性問題使沒有文件上傳以及無需更新緩存的優(yōu)點不存在了。 2.增加了CSS文件的尺寸 base64編碼圖片本質上是將圖片的二進制大小以一些字母的形式展示，例如一個1024字節(jié)的圖片，base64編碼后至少1024個字符，這個大小會被完全嵌入到CSS文件中（不過幸運的是也可以被gzip了，而圖片文件被gzip效果不明顯）。 3.編碼成本 圖片完成后還需要base64編碼，目前估計手工完成的多，因此，增加了一定的工作量，雖然不多。 五、優(yōu)缺點權衡下的實際應用價值 權衡上面所展示的優(yōu)缺點，貌似base64:URL圖片沒有什么用武之地啊，實際上非也，有一種情況時有base64編碼作為background-image背景圖片利要遠大于弊的。何種情況呢？ 在web頁面制作的時候，由于某些現實原因，我們可以會用到下面這一類圖片： 1.這類圖片不能與其他圖片以CSS Sprite的形式存在，只能獨行 2.這類圖片從誕生之日起，基本上很少被更新 3.這類圖片的實際尺寸很小 4.這類圖片在網站中大規(guī)模使用 想想看，你的網站中有沒有同時滿足上面四條的背景圖片呢？ //zxx： 假設已經過去了今天朝鮮火箭勃起的時間 怎樣，想到了沒？提點下，例如下面這個企鵝微博中的loading gif圖片（537字節(jié)，勉強算是）：
537字節(jié)的大小實際上還是偏大了點，讓我們看個更better的例子，大家可以去豆瓣首頁，可以看到下圖所示的垂直線：
為background-image圖片（for 等高布局）：
從bg_line.png這樣的命名可以預知（不是：home_bg_line.png），該背景圖片會在（可以在）網站中多處使用。 圖示平鋪圖片地址為：http://upload.chinaz.com/2012/0606/1338961513462.png 大小1 * 1 像素，png格式，大小88字節(jié)。//zxx： 當圖片顏色簡單到一定程度的時候，gif格式圖片大小要小于png8， 所以，這個點如果保存成gif格式，只需要43字節(jié)，為png一半大小 像這種圖片大小極小，但又占據了一次HTTP請求，同時不能與其他背景圖片Sprite，而網站很多地方都使用。因此，沒有什么背景圖片比這個更適合使用本文的“base64:URL圖片”技術進行優(yōu)化了！ 為了比對優(yōu)化的好處，我們來看個實際的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://upload.chinaz.com/2012/0606/1338961513409.gif"); // IE6~IE7 background-repeat: repeat-x; background-position: left bottom; } 可以看到，使用base64的CSS代碼量基本上跟下面使用完整地址差不多，因此，對于一些級小尺寸圖片，所謂增加CSS文件大小的不足可以忽略（再考慮到gzip），同時減少了1個HTTP請求，加上這個圖片網站很多地方使用，因此，累積節(jié)約的HTTP請求就很驚人了。 當然，唯一美中不足的是，對于IE6~IE7瀏覽器不能享受到這種“百利僅一害”的優(yōu)化技術，我們還需要專門為它們擦屁股。不過，權衡來看，還是很值得的，畢竟目前，在中國IE8瀏覽器是大頭（就在最近），IE6，IE7 就乖乖地瀉下去吧。 最后，展示下demo頁面YSLOW分析圖吧，可以看到，沒有任何CSS background-image請求。
七、雖是一篇小短文，結尾也要干爹疼 IE6/IE7又一次暴露了自己的屌絲形象，對其，我已無力再次吐槽，不過，畢竟歷史長河中的有功之人，就等其靜靜退出歷史舞臺吧。 再次提醒下，使用base64編碼代替CSS背景圖片是有局限性的，并不是所有圖片都適合使用base64編碼這種技術的。例如： 1. CSS Sprite圖片后期維護會死人，只能是獨立圖片 2. 圖片尺寸過大，CSS文件就會變成了臃腫的大棒子，反而不利于加載 3. CSS文件的優(yōu)點就是重用，因此，如果背景圖片就一個地方使用，減少的請求數有限，考慮到其他成本，還不如直接使用普通url圖片地址 4. 如果圖片經常改動，好吧，哥們，苦逼的前端加班仔中就多了一個你 因此，技術本身雖好，需天時地利人和方可使用。 在微博上，@樸靈提過MHTML這個東東，好像與base64編碼相關的，對此我?guī)缀跻粺o所知，希望有相關了解的人可以補充下。 另外，周末時節(jié)，想著明早可以睡到自然醒，文筆過于倉促，出現錯誤在所難免，文中有表述不準確的地方歡迎指正，感謝閱讀，祝大家周末快樂！ 原創(chuàng)文章，轉載請注明：張鑫旭-鑫空間-鑫生活 本文地址：http://www./wordpress/?p=2341
|
|
|
