dataURI: 数据统一资源标志符

1、Img src 传统方式
传统的 HTML 嵌入图片都采用以下方式外部链接:

<img src="images/myimage.gif">

以上是目前主流的 HTML 链接图片的方式,通过 img 标记的 src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。

2、DataURI 现代方式
使用 dataURI 技术,图片数据以 base64 字符串格式嵌入到了页面中,与 HTML 成为一体,它的形式如下:

<img src="data:image/jpeg;base64,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">

以上 base64 字符串已经完全看不出任何跟图片相关的信息,图片内容已经和页面融为一体,已不会因从外部链接或外部链接的各种原因受影响。
dataURI 已经受到当前主流的现代浏览器支持,如:火狐,谷歌,Safari,Opera,以及较高版本的 IE 浏览器。

3、dataURI 不完善的方面
1> Base64 编码的数据体积通常是原数据的体积 4/3,也就是 dataURI 形式的图片会比二进制格式的图片体积大 1/3。
2> dataURI 形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
3> 目前仅建议在链入小图标或小型单色图片时使用 dataURI,如果图片过大,会生成非常冗长的字符串。

4、dataURI 类型 URI 的形式
dataURI 数据可以直接在浏览器的地址栏中输入显示内容,如将以下代码在浏览器中运行,即可显示一个加粗的 "Hello, world!"data: 后面的数据直接用做网页的内容,并非网页的地址。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

以下字符在浏览器中将显示为” 你好,中文!”,charset=UTF-8 为字符编码方式。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

dataURI 形式:

data:,< 文本数据>
data:text/plain,< 文本数据>
data:text/html,<html 代码>
data:text/html;base64,<base64 编码的 html 代码>
data:text/css,<css 代码>
data:text/css;base64,<base64 编码的 css 代码>
data:text/javascript,<javascript 代码>
data:text/javascript;base64,<base64 编码的 javascript 代码>
data:image/gif;base64,base64 编码的 gif 图片数据
data:image/png;base64,base64 编码的 png 图片数据
data:image/jpeg;base64,base64 编码的 jpeg 图片数据
data:image/x-icon;base64,base64 编码的 icon 图片数据

5、dataURI 使用规范
格式为 data:{mimeType};base64,{code}{mimeType}
图片规范为:JPG 文件:image/jpeg,GIF 文件:image/gif,PNG 文件:image/png。
{code}:指图片二进制转换成 base64 的字符串。dataURI scheme 在 RFC2397 中定义,旨在将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

语法定义:

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

在实际使用时,要将 dataURI 数据也放入浏览器缓存,可以使用引入 CSS 方式,CSS 中的 URL 操作符是用来指定网页元素的背景图片,浏览器并不在意 URL 里写的是什么,只要能通过它获取需要的数据。所以,可以将 dataURI 形式的图片存储在 CSS 样式表,然后再通过所有浏览器都会积极的缓存 CSS 文件的方式来提高页面加载效率。

实际应用:
1> HTML 嵌入方式

<img src="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABA..." />

2> CSS 引用方式

<style type="text/css">
.div {
  width: 100px;
  height: 100px;
  background-image: url("data:image/gif;base64,R0lGdhfODlhAwADAIAAAP///8zMzCH5BdgfhgAAAAAAALAAAAAADAAMAAAghghgIEBHIJBQA7...");
  border: 1px solid gray;
  padding: 10px;
  }
</style>
<div class="striped_box">
这是一个有条纹的方块
</div>

6、关于 dataURI 和 dataURL 名称
目前很多关于介绍 dataURI 的文章都混淆了 dataURI 和 dataURL,正确的是 dataURI
URI = Universal Resource Identifier 统一资源标志符
URL = Universal Resource Locator 统一资源定位符
URN = Universal Resource Name 统一资源名称

URL 代表资源的路径地址,而 URI 代表资源的名称。

通过 URL 找到资源是对网络位置进行标识,如:
http://example.org/absolute/URI/with/absolute/path/to/resource.txt
ftp://example.org/resource.txt

通过 URI 找到资源是通过对名称进行标识,这个名称在某命名空间中,并不代表网络地址,如:
urn:issn:1535-3613