标题: 用Data URI Scheme嵌入内联图像
作者: Demon
链接: https://demon.tw/programming/data-uri-scheme.html
版权: 本博客的所有文章，都遵守“署名-非商业性使用-相同方式共享 2.5 中国大陆”协议条款。
高性能网站的一个建议是减少 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 !
赞赏
微信赞赏
支付宝赞赏
随机文章: