一、什么是图片的base64
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，以减少http请求
二、使用条件 base64 vs CssSprites
图片越小效果越明显，一般用于小到不能压缩成为css sprites的图片
使用CssSprites合并为一张大图：
页面具有多种风格，需要换肤功能，可使用CssSprites
网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
使用时无需重复图形内容
没有base64编码成本，降低图片更新的维护难度。（但注意Sprites同时修改css和图片某些时候可能造成负担）
使用base64直接把图片编码成字符串写入CSS文件：
无额外请求
对于极小或者极简单图片
可以被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强）
降低css维护难度
可像单独图片一样使用，比如背景图片重复使用等
没有跨域问题，无需考虑缓存、文件头或者cookies问题
三、如何转化
方式 | 地址 |
|---|---|
在线转换 | |
chrome | 拖入图片到chrome中，打开控制台source选卡项，点击图片，chrome便可计算出图片的base |
四、如何使用
方式 | 用法 |
|---|---|
css引入 | background-image:url("data:image/图片格式;base64,编码") |
html引入 | <img src="data:image/图片格式;base64,编码" /> |
