By anjia

更新日期:

文章目录
  1. 1. 什么是 Base64？
  2. 2. 它能干啥？
  3. 3. 来来来贴标签
    1. 3.1. 优点
    2. 3.2. 缺点
    3. 3.3. 适用场景
  4. 4. base64 编码工具
  5. 5. 心得
  6. 6. 参考及其它

博主声明：base64 是一个月前查的知识点，今日才得空整理，信息被遗忘的差不多了。之所以还要记录，是因为当时的心情依旧是记忆犹新啊，就是“我嘞个擦，原来这是一个2009-2010年间的话题，而我，却是6年后才来带着好奇查阅的。作为FE，简直太不合格了”。

所以，本篇就是来单纯扯淡的，闲聊。因为我还记得一个心情，就是“base64现在应用的也不特别广了，至少在background-image的那个切入点上”，于是，遗忘的也就不再细细补了。今天，想起来多少，就记录多少。

咳咳，依然很想好好学习的同学，可以移步这篇 Data URI&MHTML: 用还是不用？，开头有引用到 Yahoo! 性能专家 Stoyan Stefanov 于 2009.4.10-2010.2.4 期间发表的四篇博客，可以去研读。

来，余下的朋友，咱继续。

什么是 Base64？

简单理解，Base64 就是一堆连续字母，最后有1~2个”=”的代码。此为引用 张鑫旭博客 里的一段话，如此通俗易懂的描述，甚是喜欢。

它能干啥？

base64 可以

  1. 编码 url：比如迅雷的地址 thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==
  2. 编码图片：比如 img 的 src
  3. 编码字体文件：比如 Icon Font 【~此处没例子，嗯，就是这么任性~】
1
<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

来来来贴标签

对于某样东西的优缺点，其实我不怎么喜欢这么比，感觉实际意义不大。就比如一个东西你没用对，你就找个借口说“啊，它的优点是那个，你说的这个问题啊，是它随之而来的缺点，无法避免。”但是，这次呢，我还是想肤浅的聊一聊，就是想借这些干巴巴的条条框框来瞬间呼唤起自己对 base64 的感观认知。仅此，无它。

这里说说使用 base64 编码替代 CSS 背景图片时，它与传统 HTTP url 的比较。

优点

  1. 少了 HTTP 请求
    base64 不用再请求外部资源了，它会随着下载 HTML 的时候一并下载了
  2. 避免跨域的问题：因为图片的数据是在本地的
  3. 避免缓存：无需更新缓存，不用上传文件。不用担心被缓存的问题（eg.url本身没变的时候 诸如相对路径引用的图片资源）

缺点

  1. 浏览器兼容性问题
    用 base64 作为背景图片，低版本浏览器不支持，诸如 ie6-7 【~特别具体到哪个版本，自己去测~】
  2. 增加了 CSS 的文件大小
    貌似可以被 gzip 压缩的，所以还行；又有人说：gzip 对 base64 没有压缩能力 【~喝喝哒，此处没深入调研。都说了，今天是来扯淡的，没骗你吧~】
  3. 编码解码：增加了工作量
    【编码－是指前期的自己上传吧，解码－浏览器这层也是要解的吧】

适用场景

对于可以减少 HTTP 请求的这点，理论是相同，但落脚点到实战上，有两篇博客的意见却是不同的。
一个说：被频繁大量使用的小图片，建议用 base64。因为总体来看，是省了好多个 HTTP 请求
另一个说：被频繁大量使用的小图片，不建议用 base64。因为那么多页面在请求，浪费了浏览器的缓存…

高能预警：下方言论，仅供参考

所以，唯一能确定的一个场景就是：要 repeat 做背景的小图片，诸如 1*1px 3*3px 的
因为：图片很小、且不适合做成雪碧图的（要横竖 repeat 嘛）
总之就是：一次 HTTP 请求的开销都太大都不值得的时候，就是与不缓存、与数据尺寸可能大等相比，依然是HTTP请求不划算的时候
核心就是：图片要小要小。因为一旦大了，可读性…就差的不言而喻了，一长串串编码你能认得出它是啥图么？

再补充些适用场景：

  1. 图片，在服务器端用程序动态生成，每个用户显示的都不同时
  2. 图片，体积小，单独占用一个 HTTP 会话不值得（有人推荐 >30KB 图像就不用 Base64 了）
  3. 访问受限，当访问外部资源麻烦or受限时（就是绕开跨域嘛）

不适用场景：

  1. 数据大：数据体积可能会是比原数据体积大1/3，Data URL形式的图片比二进制格式的图片体积大
  2. 不会被浏览器缓存：Data URL 形式的图片，不会被浏览器缓存。尤其是这个图片被整站用到的时候…不缓存就不好了

顺便提下：
图片的 base64 编码是前端优化性能的一个点（雪碧图也是前端优化性能的一个点）

base64 编码工具

上面叨叨了那么多，怎么能得到 base64 编码呢？

  1. 网上有很多在线的 base64 生成工具 【~自己去查~】
  2. 工具 cssgaga
  3. HTML5 文件本地预览 FileReader
  4. Canvas 的 canvas.toDataURL()，canvas获取图像的rgba数据之后
    图像 -> 二进制PNG数据 -> ASCII的base64编码

心得

果然，网上的碎片化信息，是不系统，而且不权威。有时候，同一个点，会看到两篇文章说的有出入。想要权威的，那就去读官方文档，当真心有必要弄懂这里时。

要我说：在 background-image:url() 这里，base64 的用途现在不大了吧…这就是我开头提到的那第二个心情。

  1. 用小图片做背景+重复的，这种做法现在已经很少了吧。
  2. CSS3 的边框、阴影、渐变、滤镜等已经能满足大部分 UI 需求了
  3. 至于低版本浏览器…现在啊，直接忽略就行。UI 要求那么高干啥，功能能用就可以了

不过，我对 data:image/gif; 等这种格式还挺好奇的。
data:image/gif;base64,xxx…xxx
data:img/jpg;base64,xxx…xxx
data:font/woff;charset=utf-8;base64,xxx…xxx

参考及其它

内有 Yahoo! 专家的四篇链接
http://www.99css.com/492/
【~可以追溯地远点，了解下base64是为了解决什么问题而产生的，这有助于理解我们到底应该怎么使用它~】
标签：图片、性能 （＋ CSS IE IE6-7）

Data URI
http://www.webhek.com/data-url
https://en.wikipedia.org/wiki/Data_URI_scheme

张鑫旭：
http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-图片-页面性能优化/

【前端攻略】：玩转图片Base64编码
http://www.cnblogs.com/coco1s/p/4375774.html

https://segmentfault.com/q/1010000000456088

图片在线转换为 Base64，移动开发、HTML5开发、必备的 DataURI 工具
支持 PNG、GIF、JPG、BMP、TIF、PSD、ICO 等格式

sprites：同时修改图片＋css有时候也挺麻烦的呢…

?? 场景：
目前用的较多的：chrome 扩展的 Content CSS
因为不能直接引用扩展内部的图片文件，所以就编码存在 CSS 里

?? 场景：
图片足够小 + 不能被能成雪碧图 + 整个网站复用性很高 + 基本不会被更新

???
CSS文件的优点就是：重用 //此处的重用…貌似是 background-url的处理？
貌似 css inline 的是可以被缓存的

文章目录
  1. 1. 什么是 Base64？
  2. 2. 它能干啥？
  3. 3. 来来来贴标签
    1. 3.1. 优点
    2. 3.2. 缺点
    3. 3.3. 适用场景
  4. 4. base64 编码工具
  5. 5. 心得
  6. 6. 参考及其它