一、base64百科
Base64是网络上最常见的用于传输8Bit字节代码的编码体例之一，可用于在HTTP情况下传递较长的标识信息。
某人： 唉，我完全废柴了，为何上面明明是中文，洒家却看不懂嘞，为什么？
好吧，我也不喜欢专业术语的诠释。你只要知道，base64编码就是长得像下面这样子的代码：
thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==
上面代码年夜家都熟悉吧，迅雷下载链接哦（咳咳，该地址很纯粹），就是base64编码后的地址，所以以后看到这种：一堆持续字母，最后有1~2个"="的代码就是base64。
base64:URL就是URL地址是base64编码的。
例如下面这个：
<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />
2、base64与文件数据编码
在网络中，通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格局图片。当然，可以base64编码的文件不但仅是图片，也可以是字体文件，例如（中间有缺省）：
@font-face{
font-family: forTest;
src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');
}
自然，对background-image图片，我们也可使用base64编码进行传输，例如：
background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);
而使用base64编码作为background-image图片就是本文要着重阐述的。
三、如何取得图片的base64编码
其实在我之前"基于HTML5的可预览多图片Ajax上传"以及"zSlide-基于CSS3/HTML5演示文档jQuery插件"实际上就与图片的base64编码的获得打过交道了。如下本地图片转换成可预览的base64编码的核心脚本：
var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
htmlImage = '<img src="'+ e.target.result +'" />'; // 这里e.target.result就是base64编码
}
reader.readAsDataURL(file);
上面说的你只需要体会，实际上，目前base64编码东西很多，对我们前端制作，下面这个本地图片 base64编码获得页面是值得推荐的：Encode Data URL By PuterJam
直接将桌面图片拖到条条里就有了响应的background-image url属性可用的base64地址了：
该转换页面的原理就是上面所说的HTML5 文件本地预览原理，具体可以自己查阅资料。
四、使用base64:URL的优缺点
小我感觉base64:URL传输图片文件的益处在于：
1.削减了HTTP请求
2.某些文件可以避免跨域的问题
3.没有图片更新要重新上传，还要清理缓存的问题
不足在于：
1.阅读器支持
使用base64编码图片作为布景图片的这种手艺IE6/IE7阅读器是不支持的（IE9阅读器IE7模式下支持，这里被@前真个那点破事鄙夷了 ）。对目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
2.增加了CSS文件的尺寸
base64编码图片素质上是将图片的二进制年夜小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个年夜小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。
3.编码本钱
图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。
五、优缺点权衡下的实际应用价值
权衡上面所展示的优缺点，貌似base64:URL图片没有什么用武之地啊，实际上非也，有一种情况时有base64编码作为background-image布景图片利要远年夜于弊的。何种情况呢？
在web页面制作的时候，由于某些现实原因，我们可以会用到下面这一类图片：
1.这类图片不克不及与其他图片以CSS Sprite的形式存在，只能独行
2.这类图片从出世之日起，根基上很少被更新
3.这类图片的实际尺寸很小
4.这类图片在网站中年夜范围使用
想想看，你的网站中有没有同时满足上面四条的布景图片呢？
//zxx： 假定已经曩昔了今天朝鲜火箭勃起的时间
怎样，想到了没？提点下，例如下面这个企鹅微博中的loading gif图片（537字节，勉强算是）：