在前端开发过程中有时候需要图片、svg、ico等转成base64直接在css中使用,可以提高加载速度。将图片转换成base64编码,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。
转换步骤:
1)选择需要转换的图片,打开这个网站
2)复制base64数据
3)引用
- 在CSS中使用:background-image: url("data:image/png;base64,iVBORw0KGgo=...");
- 在HTML中使用:<img src="data:image/png;base64,iVBORw0KGgo=..." />