用Data URI/MHTML嵌入图像

高性能网站的一个建议是减少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)，例如：

/*
Content-Type: multipart/related; boundary=”_ANY_SEPARATOR”

–_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA[...snip...]SuQmCC
*/

#myid {
/* normal browsers */
background-image: url(”data:image/png;base64,iVBORw0[...snip...]“);
/* IE < 8 targeted with the star hack */
*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

Data URI的好处是减少HTTP请求，坏处是浏览器对于URI的长度有限制以及增大了文档的大小。

相关链接：
[url]http://adamlu.com/?cat=5[/url]
[url]http://www.sveinbjorn.org/dataurlmaker[/url]
[url]http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php[/url]
[url]http://www.phpied.com/data-urls-what-are-they-and-how-to-use/[/url]
[url]http://en.wikipedia.org/wiki/Data:_URI_scheme[/url]
[url]http://www.hedgerwow.com/360/dhtml/base64-image/demo.php[/url]
[url]http://dancewithnet.com/2009/08/15/data-uri-mhtml/[/url]
[url]http://www.chencheng.org/blog/2009/10/28/data-uri-try/[/url]