Data Schema URL

[url=http://http://en.wikipedia.org/wiki/Data_URI_scheme]Data Schema URL[/url] 这个是个老技术了，不过我也是最近才知道。

起因是去QQ团购看下有没有好东西，然后无聊的打开firebug，发现load图片的request很少，于是猜测是不是用了css sprite，仔细一看，居然是一坨base64 代码.

url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
  top left no-repeat; }

一开始觉得很诧异，居然css能解析这玩意，后来一想其实也很正常啊，base64是MIME的一种encoding，大部分的浏览器都支持MIME，所以能decode。decode完了以后就是一堆2进制流，图片本身就是以2进制流打开的，所以能显示。

这样做的好处是省掉了额外的http request，在HTTPS里面效果会好点。

不算神器的神器FF4 还支持如下的功能：

Alternatively, a browser can convert (encode) image based data from the clipboard to a data URI and paste it in a HTML editing field. Mozilla Firefox 4 supports this functionality.

这玩意最大的缺点：

SB IE6,7 不支持