用Data URI Scheme嵌入内联图像

标签: , , , ,

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

Data URI Scheme 的格式:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

例如:

HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

CSS

ul.checklist  li.complete { margin-left: 20px; background:
  url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
  top left no-repeat; }

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

我本来想用 Data URI Scheme 把图片内嵌到 HTML 里,然后用 VBS 调用 InternetExplorer.Application 对象来显示,这样就可以用单个 VBS 文件写出漂亮的 GUI 界面。无奈 IE8 以下不支持 Data URI Scheme,没有通用性,只好作罢。

IE6 Must Die !

随机文章:

  1. 实现简单的VBS加密
  2. bb_register_plugin_activation_hook函数——bbPress的BUG
  3. VBS修改文件和文件夹的NTFS 权限
  4. 用Tiny C Compiler编译Lua
  5. VBS转EXE工具:ScriptCryptor

留下回复