DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> base64:URL背景圖片與web頁面性能優化
base64:URL背景圖片與web頁面性能優化
編輯:SEO優化集錦     

一、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地址了:

在線獲取本地圖片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編碼,目前估計手工完成的多,因此,增加了一定的工作量,雖然不多。

1 2 下一頁

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

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

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

1.這類圖片不能與其他圖片以CSS Sprite的形式存在,只能獨行

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

3.這類圖片的實際尺寸很小

4.這

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved