Data Schema URL

最新推荐文章于 2025-03-07 15:35:45 发布

原创最新推荐文章于 2025-03-07 15:35:45 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #Firebug #Scheme #QQ #Firefox

每周总结专栏收录该内容

4 篇文章

订阅专栏

探讨使用Base64编码图像直接嵌入CSS文件的方法及其优势，如减少HTTP请求次数，尤其是在HTTPS环境下更为显著。同时介绍了Firefox 4支持将剪贴板中的图像数据转换为Base64编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[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 不支持