Data URL給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統的用img標記將伺服器上的圖片引用到頁面中的方式不一樣，在Data URL協議中，圖片被轉換成base64編碼的字串形式，並存儲在URL中，冠以mime-type。本文中，我將介紹如何巧妙的使用Data URL優化網站載入速度和執行效率。

1.Data URL基本原理

圖片在網頁中的使用方法通常是下面這種利用img標記的形式：

 <img src="images/myimg.gif ">  

這種方式中，img標記的src屬性指定了一個遠端伺服器上的資源。當網頁載入到瀏覽器中 時，瀏覽器會針對每個外部資源都向伺服器傳送一次拉取資源請求，佔用網路資源。大多數的瀏覽器都有一個併發請求數不能超過4個的限制。這意味著，如果一個 網頁裡嵌入了過多的外部資源，這些請求會導致整個頁面的載入延遲。而使用Data URL技術，圖片資料以base64字串格式嵌入到了頁面中，與HTML成為一體，它的形式如下：

從上面的base64字串中你看不出任何跟圖片相關的東西，但下面，我們將傳統的img寫法和現在的Data URL用法左右對比顯示，你就能看出它們是完全一樣的效果。但實際上它們是不一樣的，它們一個是引用了外部資源，一個是使用了Data URL。

幾乎所有的現代瀏覽器都支援Data URL格式，包括火狐瀏覽器，谷歌瀏覽器，Safari瀏覽器，opera瀏覽器。IE8也支援，但有部分限制，IE9完全支援。

2.為什麼Data URL是個好東西

Data URL能用在很多場合，跟傳統的外部資源引用方式相比，它有如下獨到的用處：

• 當訪問外部資源很麻煩或受限時(這個比較雞肋)
• 當圖片是在伺服器端用程式動態生成，每個訪問使用者顯示的都不同時（場景較少）
• 當圖片的體積太小，佔用一個HTTP會話不是很值得時（雪碧圖可以出場了）

Data URL也有一些不適用的場合

• Base64編碼的資料體積通常是原資料的體積4/3，也就是Data URL形式的圖片會比二進位制格式的圖片體積大1/3
• Data URL形式的圖片不會被瀏覽器快取，這意味著每次訪問這樣頁面時都被下載一次。這是一個使用效率方面的問題——尤其當這個圖片被整個網站大量使用的時候。

然而，Data URL這些不利的地方完全可以避免或轉化。本文的重點就是要討論這個問題。

3.在CSS裡使用Data URL

當第一次看到Data URL的作用和用法時，你也許會很不疑惑，“為什麼要麻煩的將圖片轉換成base64編碼字串，還要嵌入的網頁中，將HTML程式碼弄的混亂不堪，甚至還會有效能上的問題。”

誠然，無法否認快取在瀏覽器效能中的重要作用——如何能將Data URL資料也放入瀏覽器快取中呢？答案是：通過CSS樣式檔案。CSS中的url操作符是用來指定網頁元素的背景圖片的，而瀏覽器並不在意URL裡寫的是什麼——只要能通過它獲取需要的資料。所以，我們就有了可以將Data URL形式的圖片儲存在CSS樣式表中的可能。而所有瀏覽器都會積極的快取CSS檔案來提高頁面載入效率。

假設我們的頁面裡有一個很小的div元素，我們想用一種灰色的斜紋圖案做它的背景，這種背景在當今的網站設計者中非常流行。傳統的方法是製作一個3×3畫素的圖片，儲存成GIF或PNG格式，然後在CSS的background-image屬性中引用它的地址。而Data URL則是一種更高效的替代方法，就像下面這樣。

下面是CSS程式碼：

.striped_box  {  
  	width: 100px;  
  	height: 100px;  
  	background-image: 	
    url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");  
  	border: 1px solid gray;  
  	padding: 10px;  
}  

在我們的HTML裡放入下面的程式碼：

<div class="striped_box lazy ">  
	這是一個有條紋的方塊  
</div>  

實際輸出一個帶邊框的小方塊：

在這個例子中，Data URL的使用是完全符合場景的。它避免了讓這個小小的背景圖片獨自產生一次HTTP請求，而且，這個小圖片還能同CSS檔案一起被瀏覽器快取起來，重複使 用，不會每次使用時都載入一次。只要這個圖片不是很大，而且不是在CSS檔案裡反覆使用，就可以以Data URL方法呈現圖片降低頁面的載入時間，改善使用者的瀏覽體驗。

4.將圖片轉換成Data URL格式的方法

用Data URL來展示圖片的例子以及它的好處我們說完了，下面我們轉入下一個問題，如何將圖片轉換成Base64編碼的字串。其實網上有很多工具都可以使用，下面列舉了幾個。其中一個是線上工具，一個Mac OS X桌面應用。

5.DataURL總結

IE6/7是不支援Data URL技術的，不幸的是在中國還有很多使用者在使用這種古老的瀏覽器。希望各方面包括官方和民間都多做努力工作，讓現代瀏覽器(谷歌瀏覽器，火狐瀏覽器，IE11+)儘快的佔領市場，這是我們Web程式設計師最大的願望。

最近Data URI似乎熱了起來，特別是從淘寶UED上發了一篇《 Data URI小試 —— 在旺旺點燈(JS)上的應用 》後，陸續出現這方面的文章。看到不少人提到Data URL時都只是提到了優點，我也好奇了一把，借這機會更全面瞭解了下。

說到Data URI的優點，自然少不了“減少連結數”，把圖片轉為Base64編碼，以減少圖片的連結數。我們先想當然一下，同樣一張圖片，如果不用發起一個下載請求，開啟速度是會更快的。但是，有幾個問題需要關注下：

1. 圖片始終是要下載的，那麼下載一張圖片的速度快還是下載一堆編碼快？
2. 瀏覽器對圖片的顯示，處理效率哪個更快？
3. 圖片的快取問題

原文測試，使用Data URL方式的Demo在渲染時會比不使用 多消耗53%左右的CPU資源，記憶體多出4倍左右，耗時平均高出24.6倍 。由此可見，使用Data URl方式還是需要更多的考量，在可接受的範圍內適量使用。