mingyunyuziyou

浅谈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问题




链接:https://www.jianshu.com/p/10ca32480c1e