什么是图片的base64编码

图片的base64编码就是可以将一张图片数据编码成一串字符串，使用该字符串代替图像地址url。

使用base64图片的优点
在前端页面中常见的base64图片的引入方式有

//在css中使用base64图片
.header {
background-image: url(data:image/png;base64,iVBORw0…);
}
//在html中使用base64图片
<img src="data:image/gif;base64,base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQE…>

使用base64图片的优点
1、减少http请求次数
2、采用base64的图片随着页面一起下载，因此不会存在跨域请求的问题
3、没有图片更新要上传图片，因此不会造成清理图片缓存的问题

使用base64图片的缺点
1、增加css文件的大小,比http请求大30%左右
2、浏览器兼容性,支持ie10及以上
3、解析css的时间增长

base64图片与cssprites技术
cssprites技术就是将多个图片合成一个大的图片，将多次图片请求合成一张大图的请求，以此来达到减少http请求的次数。

使用cssprites合成一张大图的优缺点
页面具有多种风格，需要换肤功能，可使用CssSprites
图片不随意改动
使用时无需重复图形的内容
没有base64编码成本，降低图片更新的维护难度
-不会增加css文件体积
使用base64直接把图片编码成字符串写入css文件：
无额外请求
对于极小或者及简单图片
-可像独立图片一样使用，比如背景图片重复使用等
没有跨域问题，无需考虑缓存，文件头或者cookies问题
对于base64图片常见误区
base64虽有优点，但是其缺点也很明显，在使用上存在一些明显的缺陷
1、使用base64不代表性能优化，使用base64减少了http请求，但是增加了css文件的体积，css文件体积增大意味着CRP的阻塞

CRP（Critical Rendering Path，关键渲染路径）：当浏览器从服务器接>收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏>览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”。

图片不会导致关键渲染路径的阻塞，而转换为base64后大大增加了css文件的体积，css文件的体积直接影响渲染，导致空白屏幕时间增长，html和css会阻塞渲染，而图片不会阻塞渲染.