图片预览区
上传图片

Base64使用方法

// Base64 在CSS中的使用
.box{
  background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
<img src="data:image/jpg;base64,/9j/4QMZR..." />
				

什么是base64编码

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

使用base64图片的缺点

1、增加css文件的大小; 2、浏览器兼容性; 3、解析css的时间增长

base64图片与cssprites技术

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

使用cssprites合成一张大图的优缺点

页面具有多种风格,需要换肤功能,可使用CssSprites 图片不随意改动 使用时无需重复图形的内容 没有base64编码成本,降低图片更新的维护难度 不会增加css文件体积

对于base64图片常见误区

base64虽有优点,但是其缺点也很明显,在使用上存在一些明显的缺陷
使用base64不代表性能优化,使用base64减少了http请求,但是增加了css文件的体积,css文件体积增大意味着CRP的阻塞

在线工具导航