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
转载自 <a href="https://mangguo.org/data-uri-preliminary-exploration-and-automation/" title="Data URI 初探及其自动化" rel="bookmark">Data URI 初探及其自动化 | 芒果小站</a>
下面我简单说几句