Data URL給了咱們一種很巧妙的將圖片「嵌入」到HTML中的方法。跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不同，在Data URL協議中，圖片被轉換成base64編碼的字符串形式，並存儲在URL中，冠以mime-type。本文中，我將介紹如何巧妙的使用Data URL優化網站加載速度和執行效率。php
1. Data URL基本原理
圖片在網頁中的使用方法一般是下面這種利用img標記的形式：css
- <img src="images/myimage.gif ">
這種方式中，img標記的src屬性指定了一個遠程服務器上的資源。當網頁加載到瀏覽器中 時，瀏覽器會針對每一個外部資源都向服務器發送一次拉取資源請求，佔用網絡資源。大多數的瀏覽器都有一個併發請求數不能超過4個的限制。這意味着，若是一個 網頁裏嵌入了過多的外部資源，這些請求會致使整個頁面的加載延遲。而使用Data URL技術，圖片數據以base64字符串格式嵌入到了頁面中，與HTML成爲一體，它的形式以下：html
- <img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
- yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
- ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
- LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
- k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
- ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
從上面的base64字符串中你看不出任何跟圖片相關的東西，但下面，咱們將傳統的img寫法和如今的Data URL用法左右對比顯示，你就能看出它們是徹底同樣的效果。但實際上它們是不同的，它們一個是引用了外部資源，一個是使用了Data URL。git
幾乎全部的現代瀏覽器都支持Data URL格式，包括火狐瀏覽器，谷歌瀏覽器，Safari瀏覽器，opera瀏覽器。IE8也支持，但有部分限制，IE9徹底支持。程序員
2. 爲何Data URL是個好東西
Data URL能用在不少場合，跟傳統的外部資源引用方式相比，它有以下獨到的用處：github
- 當訪問外部資源很麻煩或受限時
- 當圖片是在服務器端用程序動態生成，每一個訪問用戶顯示的都不一樣時。
- 當圖片的體積過小，佔用一個HTTP會話不是很值得時。
Data URL也有一些不適用的場合web
- 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桌面應用。
Data URL總結
IE6/7是不支持Data URL技術的，不幸的是在中國還有不少用戶在使用這種古老的瀏覽器。但願各方面包括官方和民間都多作努力工做，讓現代瀏覽器(谷歌瀏覽器，火狐瀏覽器，IE11+)儘快的佔領市場，這是咱們Web程序員最大的願望。