浅谈base64图片

什么是 base64图片编码?

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。

base64图片与CssSprites的区别

CssSprites也是为了减少http请求，将多张图片放到一起，那么两者的区别是什么呢？
使用CssSprites合并为一张大图：

1. 页面具有多种风格，需要换肤功能，可使用CssSprites
2. 网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
3. 使用时无需重复图形内容

使用CssSprites的优点：

1. 没有 Base64 编码成本，降低图片更新的维护难度。（但注意 Sprites 同时修改 css 和图片某些时候可能造成负担）
2. 不会增加 CSS 文件体积

使用base64直接把图片编码成字符串写入CSS文件：

1. 无额外http请求
2. 适用于极小或者极简单图片

使用base64优点：

1. 可像单独图片一样使用，比如背景图片重复使用等
2. 没有跨域问题，无需考虑缓存、文件头或者cookies问题

webpackda