用Data URI Scheme嵌入内联图像。data:[][;charset=][;base64],

高性能网站的一个建议是减少HTTP连接数,所以使用内联图像嵌入页面可以减少HTTP连接数。目前浏览器支持Data URI的有:Opera 7.2+, Firefox, Safari, Netscape, Mozilla, IE8

Data URI Scheme

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

例如:

<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″

对于IE8以下的版本,可以使用MHTML(Multipurpose Internet Mail Extensions HyperText Markup Language),例如:

#myid {

background-image: url(“data:image/png;base64,iVBORw0[...snip...]“);

*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

Data URI的好处是减少HTTP请求,坏处是浏览器对于URI的长度有限制以及增大了文档的大小。
相关链接:
生成Data URI的网址:

http://www.sveinbjorn.org/dataurlmaker

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

phpied-http://www.phpied.com/data-urls-what-are-they-and-how-to-use/
wikipedia-http://en.wikipedia.org/wiki/Data:_URI_scheme
hedger wang-http://www.hedgerwow.com/360/dhtml/base64-image/demo.php
dancewithnet-http://dancewithnet.com/2009/08/15/data-uri-mhtml/
chencheng-http://www.chencheng.org/blog/2009/10/28/data-uri-try/

标签: 网页设计, 前端

此文章共有条评论, 人参与