我使用这个功能有一段时间了,这个功能可以翻译为内联图像,估计很多人都在期待所有浏览器都可以支持这个功能,至少目前还不靠谱,但是聪明的人类总会想出一些方法来解决出现的问题,所谓技术大多都是逼出来的。

先放一个链接吧,这里面清楚的介绍了这个功能的原理,The “data” URL scheme,文章不算长,

slot machines online online”>order cheap cialis online

你可以随便看一看。其实你也可以不必理解其为什么,因为下面我会告诉大家如何有效的使用内联图像。

大多数人使用内联图像只有一个目的:减少http请求。

当你使用了内联图像作为展示图片或者是背景图片的时候,高级的浏览器会把这张“图片”以代码的方式解释并以图片的方式展现,也就是说浏览者看到的是一张图片,但是浏览器却认为这张图片只是一段代码而已,从而避免了此次http请求。

好的,看到这里你可能会变得兴奋起来,因为也许你曾经像一个执着的苦逼一样优化再优化,有时候仅仅是为了减少一个http请求而调动了那么多的资源,现在你一定在想是不是所有浏览器都支持这个功能呢,一秒钟后你大脑里或许会不自然的蹦出一个“小草”一样的语气助词,是的,IE8–不支持此功能,不过我们可以使用MHTML来解决这个问题。啥也不说,放个例子吧。
Demo
你可以用firebug的网络面板来检阅有没有http请求,ie可以使用HttpWatch来查看,甚至你可以看一下源代码,至于是如何支持IE6可以在源码种找到。
建议:
1.在一些商业性的网站上不建议使用,毕竟我们必须保证网站不会出现任何错误。
2.只支持小于4100字符的图片,如loading图片。
3.如果你是一个优化控,可以在自己的博客上耍一耍。
4.Data URI的好处是减少HTTP请求,坏处是浏览器对于URI的长度有限制以及增大了文档的大小。
最后给俩个生成Data URI的网址:

http://www.sveinbjorn.org/dataurlmaker

http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

zp8497586rq