前端base64适用场景

转自：https://blog.csdn.net/lishuai_it_trip/article/details/106191890

　　

base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每三个8Bit的字节转换为四个6Bit的字节，Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。

使用base64来显示图片的优点显而易见：

    比如可以减少页面http请求次数，减轻服务器压力，

    还可以避免跨域问题等。

 

但是base64不是适用于所有的图片，只是在图片较小的时候适用。

    IE7及以下浏览器不支持data url

    图片太大编码字节过长，字节占用的空间会超过图片，反而会得不偿失，一般适用于小于3k的图片

    如果把大图片编码到 html / css 中，会造成页面体积显著增加，明显影响网页的打开速度。

　　　　　　　　　　　　　　

图片文件在页面中可以用base64编码来展示。比如这样：

 div {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAfCAMAAABEdrQOAAAAk1BMVEUAAABawfGL0qGl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23BawfGl23BawfGl23Cl23Cl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfGl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfGl23Cl23BawfEmviwqAAAAL3RSTlMApQSI7+YQCfv22syrmot4aWdVRBr27+bbzry7rZx5Rjc1NCknHBIKvr13ZlhXJtsYcd0AAADdSURBVDjLpdTZDoIwEAVQZRFXxBVEUBBx1/b/v86aCZnWZlqJ922S80DuTOm0TBg5ypyWJt3lyUOeGRsfTZrzzV7WrD9Z0vqTS4FaZOD2KA3JKtQi3jSgNCSvUYv4M8ek+So8CY0ZzikNWe/OTM5oQWlIzNSkpUnzL63Wb9dYv1039bfQWL9dY/12jXFb6O3B+CXammxaPwG79u/Oz317t4De5ZXYi6bhyWk7p3TyFLN8Ty/6vmP4VagF67p5BzBLBRMa3hgEC6Z0XuPcHBCls0qe4TipRIU6Y8H/5g0WkX6Q7rsdrwAAAABJRU5ErkJggg==);
        }

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAfCAMAAABEdrQOAAAAk1BMVEUAAABawfGL0qGl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23Cl23BawfGl23BawfGl23Cl23Cl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfFawfFawfFawfGl23Cl23BawfGl23BawfFawfFawfFawfFawfGl23Cl23BawfFawfGl23Cl23BawfEmviwqAAAAL3RSTlMApQSI7+YQCfv22syrmot4aWdVRBr27+bbzry7rZx5Rjc1NCknHBIKvr13ZlhXJtsYcd0AAADdSURBVDjLpdTZDoIwEAVQZRFXxBVEUBBx1/b/v86aCZnWZlqJ922S80DuTOm0TBg5ypyWJt3lyUOeGRsfTZrzzV7WrD9Z0vqTS4FaZOD2KA3JKtQi3jSgNCSvUYv4M8ek+So8CY0ZzikNWe/OTM5oQWlIzNSkpUnzL63Wb9dYv1039bfQWL9dY/12jXFb6O3B+CXammxaPwG79u/Oz317t4De5ZXYi6bhyWk7p3TyFLN8Ty/6vmP4VagF67p5BzBLBRMa3hgEC6Z0XuPcHBCls0qe4TipRIU6Y8H/5g0WkX6Q7rsdrwAAAABJRU5ErkJggg==" alt="">