芒果小站

Data URI 方案提供了一种通过 base64 编码在网页中直接嵌入文件的方法。

浏览器支持

Mozilla Firefox/Opera/Safari/Google Chrome/Internet Explorer 8

注：IE8 对 Data URI 的支持仅限于 img 标签和 CSS 背景，且数据必须小于 32k

格式

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

MIME-type: 指定数据的 MIME^[1] 类型
;charset=”<encoding>”: 指定数据的字符集
;base64: 指定数据的编码方案

默认编码方案由 ;base64 指定，如果缺省，数据必须使用 URL Encoding^[2] 转换为有效 ASCII 格式。如果 <MIME-type> 缺省，默认参数为 text/plain 类型，字符集为 US-ASCII 方案。

示例

HTML:

<img src="Data URI" alt="" />

CSS:

selector{background:url(Data URI);}

优势

1. 减少 HTTP 请求，节约带宽
2. 避免频繁建立 TCP 连接，加快载入速度
3. 使用 HTTPS 时，可减少开销
4. 避免浏览器并发连接数的限制
5. 防止非法的外部引用

缺陷

1. 不被单独缓存，父文件重新载入时必须重新加载
2. 内容变更时必须重新编码和嵌入
3. 缺乏 IE6 和 IE7 的支持
4. IE8 限制数据大小为 32k
5. base64 编码会增加 1/3 数据量

自动化

来自 Nicholas C. Zakas 的 DataURI 自动化工具，命令行格式：

java -jar datauri-x.y.z.jar -o <output filename> <input filename>

兼容 IE6 & IE7

通过 CSS Hacks 结合 MHTML^[3] 方案解决 IE6 和 IE7 不支持 DataURI 的情况。

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:<identifier>
Content-Transfer-Encoding:base64

<data>
*/
selector{*background:url(mhtml:<stylesheet>!<identifier>);}

_: 指定分隔符 (任意字符串)
identifier: 指定内容位置标识符
stylesheet: 指定样式表绝对路径

[1] MIME: http://zh.wikipedia.org/wiki/MIME
[2] URL Encoding: http://www.w3schools.com/TAGS/ref_urlencode.asp
[3] MHTML: http://en.wikipedia.org/wiki/Mhtml