什么是 base64图片编码?
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,图片随着 HTML 的下载同时下载到本地,不再单独消耗一个http来请求图片。
base64图片与CssSprites的区别
CssSprites也是为了减少http请求,将多张图片放到一起,那么两者的区别是什么呢?
使用CssSprites合并为一张大图:
- 页面具有多种风格,需要换肤功能,可使用CssSprites
- 网站已经趋于完美,不会再三天两头的改动(例如button大小、颜色等)
- 使用时无需重复图形内容
使用CssSprites的优点:
- 没有 Base64 编码成本,降低图片更新的维护难度。(但注意 Sprites 同时修改 css 和图片某些时候可能造成负担)
- 不会增加 CSS 文件体积
使用base64直接把图片编码成字符串写入CSS文件:
- 无额外http请求
- 适用于极小或者极简单图片
使用base64优点:
- 可像单独图片一样使用,比如背景图片重复使用等
- 没有跨域问题,无需考虑缓存、文件头或者cookies问题