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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【原文】有子曰:“礼之用,和为贵。先王之道,斯为美,小大由之。有所不行。知和而和,不以礼节之,亦不可行也。” 【译...
    muamuammmm阅读 245评论 0 0
  • 持续成长 孙豪 要有多自律就有多自由 20170408(13/31) 【优秀是一种习惯 /每日三事】 【成就】完成...
    套马的汉子爱学习阅读 192评论 0 1