Data URI簡介
方法/步驟
URL是uniform resource locator的縮寫，是一個特定資源的協議（用什麼方式去獲取資料）和地址的組合。每一個公開可訪問的資源，例如圖片，JS檔案，HTML檔案或者樣式 表文件，都有一個URL告訴瀏覽器從哪裡下載它們。瀏覽器會根據這個URL建立一個連結，並開始下載或執行這個檔案。
URL其實也是個 URI，URI是uniform resource identifier的縮寫。URI指定了一個協議用來接收資訊，包括一些關於資源的額外的資訊。那些額外的資訊可能是一個地址也可能不是（如果是的話， 那麼URI就是URL了），但是它總是跟一個特定的協議和有關聯。因此，既然不包含地址資訊，data URI也就不是URL了。
Data URI的格式
data URI的格式很簡單，在RFC 2397裡有清楚的說明（很短，你可以把它全部看完）。基本的格式如下：
data:[][;charset=][;base64],
在 這個格式中，data：URI的協議，表明這是一個data URI。第二部分，MIME type，表明了要呈現的資料的型別。拿PNG圖片舉個例子，它的MIME type是image/png。如果沒有指定，MIME type將會預設為text/plain。charset在大多數情況下可以無視，對於圖片來說它根本沒用。下一部分指明瞭使用的編碼。跟流行觀念相反， 你不一定要用base 64編碼。如果內容不是用base 64進行編碼，那麼這些資料就會使用標準的URL編碼（對URL安全的ASCII字元將會保留原樣顯示，其他會顯示成%xx格式的十六進位制編碼）進行編 碼。編碼後的資料可能會包含一些沒用空格，
Base 64編碼
Base 64編 碼是一個編碼規則，通過它資料被轉化成二進位制碼，然後組合成一個base 64符號的序列。Base 64符號包括大寫和小寫的字母A到Z，數字，符號+和/。=號是用來填充用的（可以檢視Wikipedia上的文章獲取更多的資訊）。你真正需要知道的是 base 64編碼會使編碼過的資料變得更小。
下面的例子是一張GIF圖片用base 64進行編碼後的data URI（來源）：
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge 8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g 77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
同一張圖片如果不用base 64編碼的話將會如下顯示：
data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85 %FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE %CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00 %00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08 %13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C %A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80 %80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84 %02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D %BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7 %AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07 %02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03 %AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B
就大小來說，用base 64編碼的圖片完勝，它明顯小多了。
注 意：Base 64編碼事實上會使影象變大。然而，如果你使用了HTTP壓縮，那麼你並不會察覺到有什麼差異，因為base 64編碼的資料的壓縮性極好。如果因為某些原因不能使用HTTP壓縮的話，那麼你可能會想知道你傳送的資料究竟有多大，然後權衡下是否值得這麼做。
不僅僅用於影象
儘管大部分人在談論data URI作為在HTML或者CSS檔案裡嵌入圖片的方法，但這裡並沒有指定是圖片。你可以編碼然後嵌入任何型別的檔案，甚至是HTML本身。Ian Hickson，HTML 5名人（或者惡人，視乎你怎麼看）提供了一個工具讓你體驗下data URI。預設的例子是使用或者不用base 64編碼把一個HTML檔案轉變成data URI。體驗一下這個data URI產生器可以幫助你具體化一下核心的概念。
注意：IE8對data URI有安全限制，使得data URI對於非圖片的資料的用處大打折扣。
效能影響
data URI最有趣的地方是它可以讓你把檔案嵌入到其他檔案中。大多數的文章都把焦點放在把data URI嵌入到CSS檔案裡改善效能上。實際上，大量的研究表明，HTTP請求是影響網頁效能最主要的因素之一，減少請求的數量可以改善頁面的效能。實際上，“最小化HTTP請求”是Yahoo! Exceptional Performance Best Practices的第一準則，它特別提到了data URI：
內聯影象使用了data URI把影象資料嵌入到頁面中，會增加HTML文件的大小。把內聯影象在（已快取的）樣式表裡組合起來可以減少HTTP請求和避免頁面大小的增加。內聯影象還沒有得到所有主流瀏覽器的支援。
這 對使用data URI來說是個很好的建議：把它們用在快取頻率最高的地方。通過HTTP下載的普通圖片會根據它們的header和瀏覽器設定進行快取，這樣它們就不用每 次請求都被重新下載。Data URI會被當作裝載它的那個檔案的一部分，所以它是所嵌入的HTML或者CSS檔案的一部分。這意味著data URI沒有單獨的快取控制策略。嵌入data URI會使你的檔案變大，如果檔案經常改動的話（例如部落格的首頁），那麼這個變大的檔案就會被頻繁的下載，使網頁速度變慢。
最簡單的使用方法是把data URI嵌入到一個強制快取的外部樣式表裡。這樣的話，在瀏覽器快取為空的情況下，網站速度會比較快（因為少了額外的請求），而在瀏覽器存在快取的情況下，則體驗是一樣的。
瀏覽器支援情況
絕大多數的現代瀏覽器都支援data URI： Firefox 2+ Opera 7.2+ - data URI必須少於4100個字元 Chrome (all versions) Safari (all versions) Internet Explorer 8+ - data URI必須小於32k
由於版本低於8的IE瀏覽器不支援data URI，你需要決定是否值得為這些不支援data URI的瀏覽器提供替代的東西（可以看看Stoyan的文章）。
結論
Data URI對網頁來說是個很有趣和獨特的概念，可能在將來會被越來越廣泛的應用，暫時來說，它大概是最適合用於那些跟效能相關的任務上，但是誰也不知道將會會 怎樣。但目前你能看到的是使用data URI獲取圖片時減少額外的HTTP請求帶來的一些效能上的優化。另外，Data URI還帶來了使用JS動態產生圖片的可能性，儘管瀏覽器對