示例：

• CSS中，background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
• HTML中，<img src=“data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==”/>

Data型別的URI作用：

• 目的是將一些小的資料，直接嵌入到網頁中，從而不用再從外部檔案載入。

問題：

• 為什麼base64編碼圖片可以直接在瀏覽器解析顯示？
  因為現代瀏覽器為包括Base64在內各種編碼的影象資訊提供了很好的支援。所以data: URI的格式能把Base64或其他資料內嵌在image標籤的屬性或者CSS中。

• 為什麼我們平常用的比較少呢？
  因為這種方式影象的大小會增加1/3。因此，這種內嵌的方法適合對小的圖形元素，比如圖示、圓角等進行處理，而從http請求此時，對大的照片、圖片（量少而大）則不應該使用Base64編碼以免影響下載速度；而且瀏覽器還不會對圖片進行快取。

優缺點：

• 把影象檔案的內容直接寫在了HTML 檔案中，這樣做的好處是，節省了一個HTTP 請求。壞處是瀏覽器不會快取這種影象。

目前碰到的：

• data:image/gif;base64,base64編碼的gif圖片資料

其它還有的：

• data:,文字資料
• data:text/plain,文字資料
• data:text/html,HTML程式碼
• data:text/html;base64,base64編碼的HTML程式碼
• data:text/css,CSS程式碼
• data:text/css;base64,base64編碼的CSS程式碼
• data:text/javascript,Javascript程式碼
• data:text/javascript;base64,base64編碼的Javascript程式碼
• data:image/png;base64,base64編碼的png圖片資料
• data:image/jpeg;base64,base64編碼的jpeg圖片資料
• data:image/x-icon;base64,base64編碼的icon圖片資料