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,5L2g5aW977yM5Lit5paH77yBdataURI 形式:
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
0 条评论