CSS Data URIs

 今天在用Google的时候无意中看到了这么一个东西。

之前都没有见识过背景图片还可以这样设置的。搜索了一下只发现一篇老外的博文有介绍这个东西。

大致按照老外的博文翻译一下。

你知道有一种方法可以在不引入额外的图片文件的情况下使用<img>标签 或者在在CSS中定义背景图片吗？

如果你使用data URIs你可以直接把图片数据直接嵌入到文档里面。

在CSS中，他看上去是这样的:

li {    background:      url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)     no-repeat     left center;   padding: 5px 0 5px 25px; }

在html里面，他看上去是这样的

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

date 的详细用法如下

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

上面这些看上去好像就是一群乱码，但是对浏览器来说他们可不是乱码。他们是你指定的文件类型的数据。

为什么要这样做呢？

最大的好处就是它可以为你节约http请求数，除了纯文档的体积，这是你的页面加载快慢最主要的原因了，请求数越少=更快的加载。

怎样获得这些代码呢？

可以到这个网站 online conversion tool，这是我发现的最好的

浏览器兼容性

Data URIs 不能在IE5-7下面工作，但是在IE8中就开始支持了。

注意

编码后的代码可能会很大，这时候可以使用gzip来减少体积

IE8只支持最大32768字节的date大小，这在支持date的浏览器中算是最小的。

维护一个全部用嵌入代码做的网站是比较困难的，因为直接替换一直图片会显得简单许多。

如果你在使用PHP，或者用PHP产生CSS，那么你可以用如下的语句<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>

你应该只在那些被长期缓存的文件上使用这种技术，比如你的css文件。如果能节省6个http请求，那么用300k的css文件来代替50k的css是没什么问题的，只要这个css文件像图片一样被长期的缓存。你可以在服务器上未css文件设置一个很长的过期时间来达到这种效果。

Data URIs不仅仅局限于图片文件，在理论上来讲，他可以实用于任何文件。

 DEMO