如何将图片转化为base64编码格式，在css中显示

在前端开发过程中有时候需要图片、svg、ico等转成base64直接在css中使用，可以提高加载速度。将图片转换成base64编码，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。

转换步骤：

1）选择需要转换的图片，打开这个网站

图片转base64

 

2）复制base64数据

 

3）引用

• 在CSS中使用：background-image: url("data:image/png;base64,iVBORw0KGgo=...");
• 在HTML中使用：<img src="data:image/png;base64,iVBORw0KGgo=..." />