优化网页效能，首要的任务是尽量减少HTTP请求（http request）的次数，例如把多个JavaScript文档合并，多个CSS文件合并等等。此外，还有有一种 data URL 的方法，可以直接把图像的内容嵌入到网页里面，官方名称是 data URI scheme。
什么是 data URI scheme？
假设你有一个图像，把它在网页上显示出来的标准方法是：
<img src="http://www.hkpug.net/files/images/check.png"/>
这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4-10个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。上述方法称为 http URI scheme，同样的效果使用 data URI scheme 可以写为：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
我们把图像文件的内容内置在HTML文档中，节省了一个HTTP请求。
几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持。
Data URI scheme 的语法
我们来分析以下下面img标签的语法：
<img src="data:image/png;base64,iVBOR....>
它包含一下部分：
data -取得数据的协定名称
image/png - 数据类型名称
base64 - 数据的编码方法
iVBOR.... - 编码后的数据
: , ; - data URI scheme 指定的分隔符号
Base64 编码
简单的说它把一些8-bit的数据翻译成标准ASCII字符，网上有许多base64编码和解码的工具，也可以使用PHP的base64_encode()进行编码：
echo base64_encode(file_get_contents('check.png'));
Data URL适用场合
Data URL能用在很多场合，跟传统的外部资源引用方式相比，它有如下独到的用处：
- 当访问外部资源很麻烦或受限时
- 当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
- 当图片的体积太小，占用一个HTTP会话不是很值得时。
Data URL也有一些不适用的场合
- Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
- Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
在 CSS 中使用 data URL
Data URI scheme 也可以在 CSS 中使用，例如：
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}
浏览器会缓存这种图像吗
不会，Data URL虽然节省HTTP请求，但是假如这个图像需要在网页的多个地方显示的话，便会加大网页的内容，延长下载的时间。解决方法是在一个CSS class中加入data URL，在需要显示图像的区块调用这个class。
而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。
例如，CSS代码：
.striped_box
{
100px;
height: 100px;
background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
border: 1px solid gray;
padding: 10px;
}
HTML代码：
<div class="striped_box lazy "> 这是一个有条纹的方块 </div>
浏览器支持
IE8 以前的版本都不支持data URI scheme