前端base64适用场景

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

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

<img src="https://img-blog.csdnimg.cn/2022010708113279459.png" alt="">

 div {
            background-image: url(https://img-blog.csdnimg.cn/2022010708113279459.png);
        }

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

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

    还可以避免跨域问题等。

 

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

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

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

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