对待健康，偏见比无知更可怕！微笑不用成本，但能创造财富。赞美不用花钱，但能产生力量。分享不用费用，但能倍增快乐。
即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。
如：
使用方式
CSS Code复制内容到剪贴板
- /**数据格式**/
- data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC
- /**样式引用**/
- .icon{
- width:30px;height:30px;
- background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
- }
标签语法：
data : 取得数据协议
image/png : 取得数据的协议名称（注意这里也图片资源也可以使用字体等）
base64 : 数据编码方式
iVBOR... : 编码后数据
优点
减少 HTTP 请求
避免某些文件跨域
无图片缓存等问题(但是一般 css 也是有缓存的好不好)
缺点
兼容性 （ IE6,7 不兼容, 可以使用 MHTML 来解决 ）
浏览器不会缓存该图片（这里是否是这样我存有疑惑，因为好像看上去也是第一次加载的时候慢）
增加 css 文件大小
编码成本及维护(展示不直观，目前需手动转换，我暂时不知道自动替换之类的插件)
之前有看到过篇测评说性能上比 sprite 微弱一些，一时间找不到链接
综合起来，data URI可以使用在
* 图片尺寸很小，使用一条 http 请求有点浪费，如渐变背景框
* 图片在全站大规模使用，且很少被更新的，如 loading
本文CSS中如何使用image data URI来处理图片的方法到此结束。透过自己的失败，我们可以认识到自己的不足与局限，了解自己的不成熟之处。透过别人的失败我们同样可以受到很多启发，学到许多真知，从而可以使我们少走很多弯路。小编再次感谢大家对我们的支持！
