用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. PT流量作弊工具之PTLiar2
  2. VBS的SendKeys,你真的懂吗?
  3. VBS实现UTF-8转Unicode(UTF-16)
  4. 为什么用strlcpy取代strncpy
  5. 隐藏快捷方式属性中的目标

留下回复