早些时候，使用IE6浏览器，网页可以另存为mht，如果网页包含图片，那么图片也会存储到mht中。
mht是微软提供的一种聚合HTML文档，它的本质其实是一个文本文件，那么我们也许会好奇，它的图片存储到那里了。
使用文本编辑器打开一个包含图片的mht文档。
这时候我们可以看到，mht的图片是使用Base64格式存储的。
于是我们可以按照mht的方式将图片存储到html中。
格式如下：
这种将按照mht格式将图片嵌入html的方式是IE特有的，其他浏览器并不支持。
所幸的是，我们在新的浏览器上可以用data URI的技术也可以做到同样效果。
什么是data url
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
Data url 格scheme 并不完全是一种新技术，在很早之前(1998年)就已经就提出了，Firfox、Opera等浏览器都早已经支持，只是IE 一直没有支持。 (直到IE8+开始支持)
Data URI允许我们使用内联（inline-code）的方式在网页中包含数据，可以在Html、CSS、Javascript等中使用。
我们可以通过Data URI scheme，将数据经过Base64编码的数据嵌入网页中，从而减少请求资源的链接数。例如向网页嵌入一个图片。
data URI的格式很简单，基本的格式如下：
data:[ mediatype ] [;base64],data
数据的协议名称 charset数据类型(例如image/png) base64 - 数据编码方式 DATA.... - 数据主体
例如：
<img src="data:image/png;base64,Rw0KGgoAAAANSUhEUgA" />
(注：数据部分只是个例子)
Data URL适用的场景
1. Data URL可以减少HTTP请求数，当图片较小，没必要占用一个HTTP会话时，使用Data URL可以提高网页性能。
2. 如果页面图片需要根据用户动态显示(例如注册码)，那么可以直接将图片嵌入页面。
3. 某些限制问题，不能链接图片的场景。
Data URL不适用的场景
1. Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3 于是大图片并不适合使用Data URL。
2. 旧版本的IE并不支持Data URL，如果需要兼容，则需要同时使用mht方式。(这意味的文件体积x2)
3. Data URL形式的图片不会被浏览器缓存，每次访问这样页面时都被下载一次。（这个情况可以将data放到css中）
在CSS中使用 Data URL
Data URL并不一定非要在HTML页面中，它可以放到CSS里面
img { src: url('data:font/woff;charset=utf-8;base64,xxxxxxx略...'); } }
放到CSS里面的优点是，CSS可以被浏览器缓存，这样不需要每次都下载。
Data URL不仅仅支持图片
大部情况Data URI作为在HTML或者CSS文件里嵌入图片的方法，但其实 Data URI并不仅仅只支持图片，它也可以支持其他类型的文件。(注：不包括IE系列，IE8的data URI 的确只支持图片)
例如：
Data URL 支持类型列表
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图片数据
浏览器支持情况
Firefox 2+ Opera 7.2+ - data URI必须少于4100个字符 Chrome (all versions) Safari (all versions) IE8+
最后，让我们用Data URL绘制一个hello world
