用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. 在Raspberry Pi 2树莓派2上安装Node.js
  2. JavaScript 记忆(Memoization)
  3. EditPlus的VBS语法高亮
  4. 用VBS精确计算100的阶乘
  5. 文件属性中“大小”和“占用空间”的区别

留下回复