DATA URI和BASE64图片

、DATA URI 减少HTTP请求的数量，把资源直接镶嵌在页面中。一般的格式： data:,【文本数据】 data:text/plain,【文本数据】 data:text/css,【CSS代码】 data:text/css;base64,【base64编码的CSS代码】 data:text/javascript,【Javascript代码】 data:text/ja

、DATA URI

减少HTTP请求的数量，把资源直接镶嵌在页面中。一般的格式：

data:,【文本数据】
data:text/plain,【文本数据】
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图片数据】

2、最常用的就是BASE64图片

2.1、用于img标签

img src="http://blog.chedushi.com/archives/”data:image/gif;base64,【gif图片base64编码数据】”">

img src="http://blog.chedushi.com/archives/”data:image/png;base64,【png图片base64编码数据】”">

img src="http://blog.chedushi.com/archives/”data:image/jpg;base64,【jpg图片base64编码数据】”">

……

2.2、背景图片background-image

background-image:url(data:image/gif;base64,【gif图片base64编码数据】)

background-image:url(data:image/png;base64,【png图片base64编码数据】)

background-image:url(data:image/jpg;base64,【jpg图片base64编码数据】)

……

?

3、PHP操作base64

base64_encode($str);//对$str进行base64编码

base64_decode($str);//base64编码的$str还原

浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!

谓”data”类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，
而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要
从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可
以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已
经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。:(
小例子：下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。
运行后会看到一条蓝色渐变底色的标题。
#8220;-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Hello, world!

这个渐变的蓝色底色实际上是用一个1×28的小图片通过横行重复(repeat-x)形成的。
这个图片很小，不过104个字节，直接嵌入到html或css文件还是很合适的。
data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，
现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，
当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。
data类型Url的形式
既然是Url，当然也可以直接在浏览器的地址栏中输入。
data:text/html,

Hello, world!

在浏览器中输入以上的Url，会得到一个加粗的”Hello, world!”。
也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。
简单的说，data类型的Url大致有下面几种形式。

data:,
data:text/plain,
data:text/html,
data:text/html;base64,
data:text/css,
data:text/css;base64,
data:text/javascript,
data:text/javascript;base64,
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图片数据

因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。
换句话说，引入base64以后，就可以支持任意形式的数据格式。
可以在Html的Img对象中使用，例如
可以在Css的background-image属性中使用，例如

div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF…);
}

可以在Html的Css链接处使用，例如
href="http://blog.chedushi.com/archives/”data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq…” />
可以在Html的Javascript链接处使用，例如
href="http://blog.chedushi.com/archives/”data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv…”>完整的语法定义
在RFC中，完整的语法定义如下。
dataurl := “data:” [ mediatype ] [ ";base64" ] “,” data
mediatype := [ type "/" subtype ] *( “;” parameter )
data := *urlchar
parameter := attribute “=” value
urlchar指的就是一般url中允许的字符，有些字符需要转义，
例如”=”要转义为”%3D”，不过我测试下来，至少在Firefox里面，不转义也是可以的。
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。
例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出”你好，中文！”。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。
Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。
base64编码和内容的隐秘
把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源，

http://www.greywyvern.com/code/php/binary2base64

有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。
当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上。
===================================================================================
如果你用的是IE8，如果你想编码图片，更简单的方法是，自己写一个HTML网页，把本地图片
放进去，然后用IE8打开该网页，然后保存为mht文件，然后用记事本打开mht文件，你就会看
到图片以及被编码过了，直接拷贝之，粘贴之，加上data:image/jpeg;base64,等前缀，搞定之。
在mht文件中，每一个NextPart下面都会有类似下面的几行说明字段：
Content-Type: image/jpeg
Content-Transfer-Encoding: base64
Content-Location: file:///E:/cat2.jpg
根据这些信息就可以知道是用什么方式编码的什么格式的文件了

大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/　LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢？这是Data URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
在上面的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’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子：
网页中一张图片可以这样显示：

也可以这样显示：

B/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD

3wAAAABJRU5ErkJggg%3D%3D”/>

我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍，O(∩_∩)O~。

原文地址：DATA URI和BASE64图片, 感谢原作者分享。