Image转Base64镶嵌网页中

　　有一段时间在看相关的技术文章时，发现文章内的图片不是平常我们浏览网站时从服务端请求过来的图片文件，图片的地址格式：

　　

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAH7BAMAAAA5k1YQAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURczMzMzM/wAAAP7+/pmZzOvr67CwsGtra4+Pj...

　　格式很明显由四部分组成

　　1. data

　　应该是文件请求的一种重定向方式，一般我们是通过http(s)来请求资源文件，而data是为了标志请求的资源已经通过编码包裹在URI中，只需要直接解析地址就可以获取到资源，无需再次请求服务器返回对应的资源。

　　2. 目标的资源类型

目前，Data URI scheme支持的类型有：
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图片数据

　　3. base64：目标资源的编码方式

　　　

　　4.经过base64编码后的字符串

　　可见如果将图片经过base64编码后插入到网页中，会直接增大网页的大小，好处是减少了服务器的请求数。

 

　　优点：

　　1. 可以将图片数据镶嵌在网页中，当用户请求网页时即可减少再次请求图片数据的请求数

　　2. 有一些博客程序上传图片后返回的url是图片的绝对地址，例如Emlog,导致在博客搬家、更换域名后期维护十分不便，需要编写脚本批量替换图片的url地址，想过将图片全部缓存到七牛的空间上，然后统一指向缓存的域名地址，但依旧是治标不治本，如果图片缓存的域名失效了，还是需要更新图片地址，唯一的好处是减少了图片的请求数和响应的时间，如果将图片镶嵌到页面中，就不需要担心图片挂掉了。

　　3. 图片说删就删，因为图片资源镶嵌在标签上，所以说如果直接删除标签，图片也就不再占据界面的大小，不需要再编写逻辑删除服务器上的图片资源。

　　缺点：

　　1. 本质上总的请求大小没有改变，基于浏览器的优化机制，只会对远程的图片资源进行缓存，但是这种data：的数据格式，右键图片属性并不会直接显示图片资源，意味着浏览器不会对其缓存，如果图片过大的话还会损耗服务器的带宽。

　　2. 图片管理困难，由于图片直接镶嵌在页面中，并不独立于服务器上，于是后台很难统一管理

　　3. 浏览器不一定支持。

 

 

拓展学习：通过资料的查阅，发现有一些博文总结的非常的到位，由浅入深，面面俱到，看来学习道路还很长！

经过资料查阅

　　这种技术叫 Data URI Scheme ，是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。

参考文章：

http://www.cnblogs.com/fsjohnhuang/p/3903688.html [JS魔法堂：Data URI Scheme介绍]

http://www.cnblogs.com/hustskyking/p/data-uri.html [细说 Data URI]