Data URL 給了我們一種很巧妙的將圖片“嵌入”到HTML中的方法。跟傳統(tǒng)的用 img 標(biāo)記將服務(wù)器上的圖片引用到頁面中的方式不一樣，在Data URL協(xié)議中，圖片被轉(zhuǎn)換成 base64 編碼的字符串形式，并存儲在URL中，冠以mime-type。本文中，我將介紹如何巧妙的使用Data URL優(yōu)化網(wǎng)站加載速度和執(zhí)行效率。

?

1. Data URL基本原理

圖片在網(wǎng)頁中的使用方法通常是下面這種利用 img 標(biāo)記的形式：

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

?

這種方式中， img 標(biāo)記的 src 屬性指定了一個遠(yuǎn)程服務(wù)器上的資源。當(dāng)網(wǎng)頁加載到瀏覽器中 時，瀏覽器會針對每個外部資源都向服務(wù)器發(fā)送一次拉取資源請求，占用網(wǎng)絡(luò)資源。大多數(shù)的瀏覽器都有一個并發(fā)請求數(shù)不能超過4個的限制。這意味著，如果一個 網(wǎng)頁里嵌入了過多的外部資源，這些請求會導(dǎo)致整個頁面的加載延遲。而使用Data URL技術(shù)，圖片數(shù)據(jù)以base64字符串格式嵌入到了頁面中，與HTML成為一體，它的形式如下：

        <img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
      

?

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

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

?

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

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

• 當(dāng)訪問外部資源很麻煩或受限時
• 當(dāng)圖片是在服務(wù)器端用程序動態(tài)生成，每個訪問用戶顯示的都不同時。
• 當(dāng)圖片的體積太小，占用一個HTTP會話不是很值得時。

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

• Base64編碼的數(shù)據(jù)體積通常是原數(shù)據(jù)的體積4/3，也就是Data URL形式的圖片會比二進(jìn)制格式的圖片體積大1/3。
• Data URL形式的圖片不會被瀏覽器緩存，這意味著每次訪問這樣頁面時都被下載一次。這是一個使用效率方面的問題——尤其當(dāng)這個圖片被整個網(wǎng)站大量使用的時候。

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

?

3. 在CSS里使用Data URL

當(dāng)?shù)谝淮慰吹紻ata URL的作用和用法時，你也許會很不疑惑，“為什么要麻煩的將圖片轉(zhuǎn)換成base64編碼字符串，還要嵌入的網(wǎng)頁中，將HTML代碼弄的混亂不堪，甚至還會有性能上的問題。”

?

誠然，無法否認(rèn)緩存在瀏覽器性能中的重要作用——如何能將Data URL數(shù)據(jù)也放入瀏覽器緩存中呢？答案是：通過CSS樣式文件。CSS中的 url 操作符是用來指定網(wǎng)頁元素的背景圖片的，而瀏覽器并不在意URL里寫的是什么——只要能通過它獲取需要的數(shù)據(jù)。所以，我們就有了可以將Data URL形式的圖片存儲在CSS樣式表中的可能。而所有瀏覽器都會積極的緩存CSS文件來提高頁面加載效率。

?

假設(shè)我們的頁面里有一個很小的 div 元素，我們想用一種灰色的斜紋圖案做它的背景，這種背景在當(dāng)今的網(wǎng)站設(shè)計者中非常流行。傳統(tǒng)的方法是制作一個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的使用是完全符合場景的。它避免了讓這個小小的背景圖片獨自產(chǎn)生一次HTTP請求，而且，這個小圖片還能同CSS文件一起被瀏覽器緩存起來，重復(fù)使 用，不會每次使用時都加載一次。只要這個圖片不是很大，而且不是在CSS文件里反復(fù)使用，就可以以Data URL方法呈現(xiàn)圖片降低頁面的加載時間，改善用戶的瀏覽體驗。

?

?

4. 將圖片轉(zhuǎn)換成Data URL格式的方法

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

• DataURLMaker在線工具
• DataURLMaker Mac OS X 桌面

?

Data URL總結(jié)

IE6/7是不支持Data URL技術(shù)的，不幸的是在中國還有很多用戶在使用這種古老的瀏覽器。希望各方面包括官方和民間都多做努力工作，讓現(xiàn)代瀏覽器(谷歌瀏覽器，火狐瀏覽器，IE11+)盡快的占領(lǐng)市場，這是我們Web程序員最大的愿望。