这篇文章介绍一款在线的图片 base64 编码利器 — Duri.me。data URI 图片是 base64 编码的图片文件，可以嵌入到 HTML 或者 CSS 文件中，能够减少 HTTP 请求，提高网页加载速速。
<a href="http://www.cnblogs.com/lhb25/archive/2012/06/12/8-free-tools-for-testing-website-speed.html" target="_blank">推荐8款很棒的测试网站速度的免费工具</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html" target="_blank">10套精美的免费网站后台管理系统模板</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/11/20/cloud-ide-for-developers.html" target="_blank">开发者必备的8个最佳云端集成开发环境</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/09/27/10-css3-online-generator-tools.html" target="_blank">十款精心挑选的在线CSS3代码生成工具</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/06/18/8-useful-and-free-web-application-security-testing-tools.html" target="_blank">推荐8款优秀的免费 Web 安全测试工具</a>
<code> mediatype </code>是一种MIME类型字符串, 例如 "<code>image/jpeg</code>" 代表 JPEG 图像文件。如果省略这个参数，则默认值为<code>text/plain;charset=US-ASCII。</code>如果数据是文本类型, 你可以直接将文本嵌入在 data: 后面 （根据文本类型以及编码，使用合适的 HTML 实体编码或者百分号编码）。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。
下面是一些示例：
简单的text/plain类型数据
base64编码过的数据
一个HTML文档源代码 <code><h1>Hello, World</h1></code>
在 Firefox 浏览器中，将一个 nsIFile 转换为 data URI 的方法：
下文介绍一些在使用 <code>data</code> URIs 时遇到的常见问题：
语法：data URIs 的格式很简单，但很容易会忘记了在 "data:" 协议名后面必须有一个逗号(MIME类型和"base64"都是可省略的)，或者在对数据进行 base64 编码时发生错误。
HTML代码格式化：一个data URI 是作为了一个文件内的文件，所以在嵌入其他文档的内部时，这个data URI 所在的行就会非常的长，所以应当用空白符（换行符、制表符、 空格）来对它进行格式化，但如果数据是经过base64编码过的,就可能会遇到一些问题。
长度限制：虽然 Mozilla 支持无限长度的 data URIs,但是标准中并没有规定浏览器必须支持无限长度的 data URIs。比如 Opera 11 限制 data URIs 的长度最多为 65000 个字符。
不支持查询字符串：一个 data URI 的数据字段是没有结束标记的，所以尝试在一个data URI后面添加查询字符串会导致,查询字符串也一并被当作数据字段。例如：
这个data URI代表的HTML源文件内容为：
注意：从Firefox 6开始，data URI 中的锚点标记(#)会像在其他普通网页 URI 上一样可被识别,因此,如果想要表示文件内容中的 "#"，必须将它转义为'%23'。
浏览器兼容性：已经支持 data: 协议的浏览器有 Opera 7.20 及其以上版本，Safari 和 Konqueror。Internet Explorer 7 及以下版本不支持，Internet Explorer 8 及以上版本只支持在 CSS 文件中使用 data URIs 格式的图片。
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html" target="_blank">精心挑选的优秀 jQuery Ajax 分页插件</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html" target="_blank">让人爱不释手的13套精美网页图标素材</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/11/08/showcase-of-really-awesome-css3-demo.html" target="_blank">Web前沿：那些让人惊叹的CSS3应用</a>
欢迎任何形式的转载，但请务必注明出处。