项目之前用的是CSS Sprite，但是我所负责的模块需要与后台同步展示不同的图片。后台小哥哥呢说给的是base64，让我轻松展示。
点击看效果
demo
我一头雾水，毕竟没听过，于是乎上百度和博客各种翻阅，便记录下一些前辈们的真知灼见，以便自己以后忘记了还有个地方回顾回顾。
首先，base64长的是个什么样子呢。我只能说非常非常的长和多，这和图片大小有关系，越大的图片base64越长，所以base64适用于小图片。
ps:我在博客园文本编辑器直接复制粘贴base64页面会直接卡死，这是个bug?还是只有我会这样，还是这个base64太长了？于是乎我还是截图上传吧。
看了上图那个滚动条，你就知道其实还有许许多多还没完整的截出来，这下你就知道他是有多长了吧，其实这也怪我，我拿了一个比较大的图片文件。
看完你会问：那什么是base64呢？
其实这一长串东西就叫做base64， 另外还有个名字:Data URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
在上面的图1中，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 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。
不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。
但是也不是什么图片都可以用base64。需要满足一些条件。
1.尺寸足够小：如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），这种图片往往只有几十字节，却需要一个 http 请求，十分不值得
2.无额外请求
3.可像单独图片一样使用，比如背景图片重复使用等
4.没有跨域问题，无需考虑缓存、文件头或者cookies问题
其实base64也有缺点
就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积（因为太长了，用一两个还OK，用10多个就，，呵呵），CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染，而图片不会。
Base64 跟 CSS 混在一起，大大增加了浏览器需要解析CSS树的耗时。
说了这么多，怎么可以得到base64呢
个人试过了三种方式
1.google浏览下放入图片在资源栏里点击图片获取
2.专用于base编码的网站提供了专用的工具
https://tool.css-js.com/base64.html 这个挺好用的
3.代码实现
用html5的file api里的 readAsDataURL函数 这是一个把文件转化成base64编码
附上自己的demo代码
Document
另外还有一种canvas转换方法就没去试了，不过IE8都不支持FileReader和canvas，这个值还得后台给才行。