网页上的图片资源如果采用 http 形式的 url 的话都会额外发送一次请求，网页发送的 http 请求次数越多，会造成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着 html 元素一并加载，这样就可以减少 http 请求的次数，对于网页优化是一种比较好的手段。
当我们将一个只有几KB的图片转化为Base64格式编码，根据 Base64 的编码原理，大小比原文件大小大 1/3。如果将其写在一个 CSS 文件中，这样一个 CSS 文件的大小会剧增，造成代码可读性差不说，还会造成请求传输的数据量递增。Base64 无法缓存，要缓存只能缓存包含 Base64 的文件，比如 HTML 或者 CSS，这相比直接缓存图片要弱很多，一般 HTML 会改动频繁，所以等同于得不到缓存效益。精灵图可能是更好地方案。
所以我们一般对于极小或者极简单的图片使用 Base64，例如只有几像素的图片不用考虑跨域问题不想页面的图片缓存。
使用 Base64 图片，记得加上Base64位编码头。
//html中使用
<img src="data:image/png;base64,/9j/4AAQSkZJRg...> //css中使用 .test{background:url(data:image/png;base64,/9j/4AAQSkZJRg...)}
