以前浏览一下网站的时候,经常见到有的网站网页上有些图片的src或css背景图片的url后面跟了一大串字符,data:image/png;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAQWAASDERE657SFAASD875675。开始的真的不了解是为什么,后来网上一查,终于知道了点,原来所谓”data”类型的Url格式,是在RFC2397中定义的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
目前,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图片数据

base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
比如一些在线资源,
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html
data类型的Url格式早在1998年就提出了,到目前为止,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式
例子:
<img src=“http://www.333xin.com/image/indeximg/skin-1.png”/>
那么转换后可以这样显示
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK0AAAA1CAMAAAAERJtfAAAAA3NCSVQICAjb4U/gAAAB+
FBMVEVCxUj6cxn/lottxivtlDmn5KnhTk3V78SN3ZFlxin7llKrxjx2yTD9wpp01Xn87a76fCfjTVD2yFBXw0/A7MLztDH/mWb/3
Nj4Ylf/vbXXyEjmbUSa4J5cxEL8uYyB2IX/kYW045ea2nPJ67Xzh0T/eWr/xL2N1WH1xkLjW0rd8tD/39xbzWClxjr+
3MWZzDP/t6+z6LZmzGa+x0Ht+OZOyVX0dEyr4Irqhz3M8M5exTr/opj+7eL907fe1lV+z0zwqDP4zkX/zMz8sH3g
S0/0wjL6hDX9yqjnyEz8p2++56XZ89rvWVT7tlhaxEn99M7/7Ork9dn6tkfOx0ST12n5y1H0XlVfxTmQxjX/hnm
LxjT2oTuByzf/5uTnUlH/aln/mZnqiT21xz/i00X/rqXnc0JmzDOj3YD/1ND98sT2x0qezj/0X1W95q3AzkbkYUjw+
uvQ7r7unDfh9Nb/8O71xDrrVVLxrjL211KY2XC1xTr/5OGw4pHvyE77jUNixTH51kz/iXz87rXqgkDgyEr/gXP/pp3
/2dXofED/cmLF6q/E0UL+5dTvY1DhUkzm9t3voja35Jv501jOxUqU1mP/ycPrhj7L7Lf/tbXGx0L/mZnma0r+9+
jsjzvzuzC13pTe9873+urv/+/31kKJzDqZ2XKxzTj/jYF5VSlJAAAAqHRSTlP/
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////8A//////9Qmai1AAAACXBIWXMAAAsSAAALEgHS3X
78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzAxLzE0HmB+6QAAABx0RVh0U29mdHdhc
mUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAiASURBVGiBzZiNc9tmHcflEHeeiz1HNsZtbLm
El6adq9YaBuzYjNWKFdfGLZRFpbBwlO0YoUe7Imfk0kal3QpsXppy63rcbdztuQH/Jr/nTXokPU6UsF743bW
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
7/ApVUpF+4/AsmAAAAAElFTkSuQmCC
data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是我们把图像文件的内容直接写在了HTML 文件中,节省了一个HTTP 请求,这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。坏处呢,就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。。