即將圖片資源轉換為 base64 字符串格式嵌到頁面或樣式中。這樣連圖片的請求鏈接都省了。
如：
使用方式
CSS Code復制內容到剪貼板
/** 數據格式 **/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8
QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC
/** 樣式引用 **/
.icon{
width: 30px; height: 30px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK
8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
}
標簽語法：
data : 取得數據協議
image/png : 取得數據的協議名稱(注意這裡也圖片資源也可以使用字體等)
base64 : 數據編碼方式
iVBOR... : 編碼後數據
優點
減少 HTTP 請求
避免某些文件跨域
無圖片緩存等問題(但是一般 css 也是有緩存的好不好)
缺點
兼容性 ( IE6,7 不兼容, 可以使用 MHTML 來解決 )
浏覽器不會緩存該圖片(這裡是否是這樣我存有疑惑，因為好像看上去也是第一次加載的時候慢)
增加 css 文件大小
編碼成本及維護(展示不直觀，目前需手動轉換，我暫時不知道自動替換之類的插件)
之前有看到過篇測評說性能上比 sprite 微弱一些，一時間找不到鏈接
綜合起來，data URI可以使用在
* 圖片尺寸很小，使用一條 http 請求有點浪費，如漸變背景框
* 圖片在全站大規模使用，且很少被更新的，如 loading