base64图片的优缺点（雪碧图）
- 第二个img标签是有转成base64图片的
- 结果：
===>图片转成base64图片的地址为：
===>然后把需要转换的图片上传，得到转换后的base64图片的字符串，然后复制粘贴到img标签的src属性上即可
优点：
1、减少http请求次数
2、采用base64的图片随着页面一起下载，因此不会存在跨域请求的问题
3、没有图片更新要上传图片，因此不会造成清理图片缓存的问题
缺点：
1、增加css文件的大小,比http请求大30%左右
2、浏览器兼容性,支持ie10及以上
3、解析css的时间增长
什么时候用base64呢？
如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。
可以通过控制图片的大小来定义是否是大图片或小图片，如：超过 10MB 为大图片，没超过则为小图片，这个时候可以通过 limit 来控制了。
实际项目开发中，在webpack中配置，如下： 
webpack相关配置，请跳转至大神的webpack中的loader详解
CssSprites与base64编码
使用CssSprites合并为一张大图：
- 页面具有多种风格，需要换肤功能，可使用CssSprites
- 网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
- 使用时无需重复图形内容
- 没有 base64 编码成本，降低图片更新的维护难度。（但注意 Sprites 同时修改 css 和图片某些时候可能造成负担）
- 不会增加 CSS 文件体积
使用base64直接把图片编码成字符串写入CSS文件：
- 无额外请求
- 对于极小或者极简单图片
- 可像单独图片一样使用，比如背景图片重复使用等
- 没有跨域问题，无需考虑缓存、文件头或者cookies问题