CSS Data URIs

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

data URIs

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

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

你知道有一种方法可以在不引入额外的图片文件的情况下使用<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




[本日志由 admin 于 2014-06-10 12:52 AM 编辑]

有什么问题可以加群,100852896
点击这里加入此群 在线提问
文章来自: 本站原创
Tags:
评论: 1 | 查看次数: 4405
博主QQ: 友情链接请找我
QQ群: 灰色档案
返回顶部 关闭