图片base64编码利器：在线 Data URI 生成工具 – Duri.me

这篇文章介绍一款在线的图片 base64 编码利器 — Duri.me。data
URI 图片是 base64 编码的图片文件，可以嵌入到 HTML 或者 CSS 文件中，能够减少 HTTP 请求，提高网页加载速速。

　　Duri.me 是一个简单但非常有用的 Web 应用程序，可以快速的在线生成图片文件的 data URI。Duri.me 使用非常简单，把图片拖放到框内，然后点击
Generate Base-64 Code 按钮就会自动生成编码，Duri.me 帮你生成了图片、CSS和Base64字符串三种形式的代码，可以根据自己的需要拷贝生成的内容。

　　

Data URI 简介

　　

data

URIs 是由 RFC
2397 定义，允许将一个小文件进行编码后嵌入到另外一个文档里。data URIs 的语法结构如下：

　　mediatype

是一种MIME类型字符串, 例如 "

image/jpeg

" 代表 JPEG 图像文件。如果省略这个参数，则默认值为

text/plain;charset=US-ASCII。

如果数据是文本类型,
你可以直接将文本嵌入在 data: 后面 （根据文本类型以及编码，使用合适的 HTML 实体编码或者百分号编码）。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。

　　下面是一些示例：

　　简单的text/plain类型数据

　　base64编码过的数据

　　一个HTML文档源代码

<h1>Hello, World</h1>

Firefox中生成 data URI 的方法

　　在 Firefox 浏览器中，将一个 nsIFile 转换为 data URI 的方法：

常见问题和兼容性

　　下文介绍一些在使用

data

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 格式的图片。