我們在使用<img>標簽和給元素添加背景圖片時，不一定要使用外部的圖片地址，也可以直接把圖片數據定義在頁面上。對於一些“小”的數據，可以在網頁中直接嵌入，而不是從外部文件載入。
如何使用
.CSS
p {
background: url(data:image/gif;base64,R0lGOD......jIQA7)
no-repeat left center;
padding: 5px 0 5px 25px;
}
或
p {
background: url(fakepath/image.gif)
no-repeat left center;
padding: 5px 0 5px 25px;
}
HTML
<img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />
或
<img src="fakepath/image.gif" />
語法：
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
* data的一些類型：
* 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/gif;base64,base64編碼的gif圖片數據
* data:image/png;base64,base64編碼的png圖片數據
* data:image/jpeg;base64,base64編碼的jpeg圖片數據
* data:image/x-icon;base64,base64編碼的icon圖片數據
好處：
減少HTTP請求
瀏覽器兼容性：
IE7及以下不支持。有如下解決方案：
使用IE條件注釋
<!--[if lt IE 8]>
...... IE7及以下內容 ......
<![endif]-->
* CSS Hack
*background-image:url(sprite.png); /* Only IEv6 & 7 see this */
你還應該知道的：
l 轉化之后的圖片代碼通常比圖片本身要大。
l IE8支持的最大內嵌圖片代碼為32768個字節
l 以data形式插入圖片不是萬能的，很多情況下，插入一張圖片反而易於修改和維護。