data URI scheme

优化网页效能，首要的任务是尽量减少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能用在很多场合，跟传统的外部资源引用方式相比，它有如下独到的用处：


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
{
width: 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