什麼是Data URI

Data URI

Data URI是由RFC 2397定義的一種把小文件直接嵌入文檔的方案。格式以下：

data:[<MIME type>][;charset=<charset>][;base64],<encoded data>

其實總體能夠視爲三部分，即聲明：參數+數據，逗號左邊的是各類參數，右邊的是數據。

聲明：data:是URI的協議頭，代表其資源是一個data URI；

參數：MIME type，表示數據呈現的格式，即指定嵌入數據的MIME。對於PNG的圖片，其格式是：image/png，若是沒有指定，默認是：text/plain；character set(字符集）大多數被忽略，默認是：charset=US-ASCII。若是指定是的數據格式是圖片時，字符集將再也不使用；base64，這一部分將代表其數據的編碼方式，此處爲聲明後面的數據的編碼是base64，咱們能夠沒必要使用base64編碼格式，若是那樣，咱們將使用標準的URL編碼方式（形如%XX%XX%XX的格式）；

數據：這個encoded data部分爲實際的數據，可能包含空格，可是可有可無。

優勢和缺點

這兩點相信你們都看眼煩了，那就把我認爲重要的say下嘍。

優勢：

減小HTTP請求數
避免了圖片從新上傳，清理緩存的問題
運用在模版環境中時，省去了拷貝圖片的步驟
……

缺點：
1.沒法重複利用。img雖然是一個請求數，可是加載完後，若是還有N次引用，那還1，而DataURI卻必須是N次了；
2.圖片等資源轉換爲DataURI所用的Base64編碼以後，文件大小增長了好多（一般50%-300%），想一想下，若是服務器端不作Gzip壓縮的話，那不是要……，壓縮後卻是跟本來的差很少大小；
3.加載、解碼後渲染，消耗內存和CPU，手機上還得耗電池呢啊；
4.瀏覽器限制；
5.這個也是最可氣的，那麼一大長串編碼無疑是對本身優雅代碼的一個摧殘啊，有代碼潔癖的你能忍麼？
6.……

如何得到圖片的base64編碼

在網上搜了幾個在線的圖片轉義爲base64的，缺發現沒幾個好用的，並且記不住網址，下面推薦一個，http://www.pjhome.net/web/htm...（原版的），最初見到的是在飄飄那裏：http://labs.pufen.net/my_coll...。

固然，這麼好的東西本身也必需要收藏一份兒了啊，格桑的博客的地址http://aiyouu.net/tools/datau...，用的時候方便啊，有空了再改造下。

哦，忘了說怎麼用了，直接把圖片拖到頁面裏面就能夠了。

手機端DataURI比外鏈資源慢6倍

很久以前（那時候我還在上學）鬼哥寫過DataURI會多消耗53%左右的CPU資源，內存多出4倍左右，耗時平均高出24.6倍，那手機上呢？

mobify最新的測試數據：DataURI要比簡單的外鏈資源要慢6倍。

詳情點擊訪問：mobify

使用建議

sprite能用還得用啊，DataURI的方法要慎用，對於Webapp，仍是研究各類緩存技術；
個別不能sprite且質量小的圖片能夠用DataURI
對個別BT需求時能夠用來作爲替代img的方案
……（期待你來補充的哦）

最後：URI，不是URL

若是不仔細看，真的會誤把data URI當作data URL，而後用URL的方式去理解URI，其實否則！

URL是uniform resource locator的縮寫，在web中的每個可訪問資源都有一個URL地址，例如圖片，HTML文件，js文件以及style sheet文件，咱們能夠經過這個地址去download這個資源。

其實URL是URI的子集，URI是uniform resource identifier的縮寫。URI是用於獲取資源，包括其附加的信息的一種協議。附加信息多是地址，也可能不是地址，若是是地址，那麼這時URI就變成URL了。注意的是data URI不是URL，由於它並不包含資源的公共地址。

文章轉載於http://aiyouu.net/data-uris-e...

參考擴展閱讀：
1.關於base64編碼的原理及實現（表示迷糊）
2.Data URIs
3.Data URI&MHTML: 用仍是不用？
4.Data URI的利弊
5.手機端DataURI比外鏈資源慢6倍
6.譯文：data URI，不是URL啊
7.原文：Data URIs explained