使用Data URI为网站提速

在研究Google网页底部的四色签名档处的时候。查看其源码HTML部分为：

<div id="maia-signature"></div>

CSS部分是通过背景图片实现的，但是其图片url却很反常。

background:url("data:image/png;base64,iVBORw0KGgoA....")

查阅相关资料后发现这是Data URI。通过Data URI你在使用标签，或者用CSS声明背景图片时，可以不用链接到外部图片文件，而是直接将图片数据写入文档。

在HTML中像这样使用图片：

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEU...." alt="" />

在CSS中可以这样使用背景图片：

#id{ background:url("data:image/png;base64,R0lGODlhEAAQ...") no-repeat left center; }

格式说明：

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

数据部分的字符能够被浏览器解析为其原有文件类型。

为什么要这样做？

最主要的原因：减少HTTP请求。除了纯文档大小，这是影响网页加载速度最大的因素。越少越快。

怎样得到代码？

使用这个在线转换工具。

http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

浏览器兼容性

IE系列，IE8以下不支持Data URI。你可以：

对IE单独书写一个CSS将图片引入。
只在一些有特殊需求（没有图片更好）的场合使用。
直接无视！
阅读这篇文章里面给出了替换的解决方法。

注意事项

转换后的代码数据要比原图片数据多少大一些。这点GZip可以解决。
IE8有最低的URI数据大小限制32768字节。所以不要指望任何大小图片都行。
如果网站全都用Data URI替换的话，将会很难维护。使用图片更简单。
如果你使用php,可以通过下面代码获得Data URI
<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
你最好只在有大量缓存的文档中使用，如你的CSS。如果能够减少6个HTTP请求，即使CSS由50k增加到300k也是值得的。但是前提是CSS能够像图片一样缓存，所以给CSS设置较长的缓存时间会比较好。
Data URI不只可以用于图片，理论上可以用于任何东西。
<canvas>可能比Data URI更有优势。一旦其得到更广泛的支持，有人做出相关工具。