引言
图片处理在前端工作中可谓占领了非常重要的一壁江山。而图片的Base64编码可能相对一些人而言比較陌生，本文不是从纯技术的角度去讨论图片的base64编码。标题略大，只是仅仅是希望通过一些浅显的论述，让你知道什么是图片的base64编码，为什么我们要用它，我们怎样使用而且方便的使用它。并让你懂得怎样去在前端的实际工作中运用它。
什么是base64编码?
我不是来讲概念的，直接切入正题。图片的base64编码就是能够将一副图片数据编码成一串字符串，使用该字符串取代图像地址。
这样做有什么意义呢？我们知道，我们所示网页上的每个图片，都是须要消耗一个http请求下载而来的（全部才有了csssprites技术的应运而生，可是csssprites有自身的局限性。下文会提到）。
没错，无论怎样。图片的下载始终都要向server发出请求。要是图片的下载不用向server发出请求，而能够随着 HTML 的下载同一时候下载到本地那就太好了，而base64正好能解决问题。
那么图片的base64编码长什么样子呢？举个栗子。www.google.com的首页搜索框右側的搜索小图标使用的就是base64编码。我们能够看到：
1 //在css里的写法
2 #fkbx-spch, #fkbx-hspch {
3 background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
4
5 ...
6 }
1 //在html代码img标签里的写法
2 <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
上面各自是图片的base64编码在css里面的写法和在html<img>标签里的写法。base64编码长得就是这个样子。当然base64编码不只运用在图片编码，还能够：
thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa（不要复制我我真的不是种子）
嘿嘿没错。迅雷的“专用地址”也是用Base64加密的，有兴趣自行google，不做赘述。
为什么要使用Base64编码？
那么为什么要使用base64传输图片文件？上文也有提及。由于这样能够节省一个http请求。
图片的base64编码能够算是前端优化的一环。
效益虽小，但却缺能积少成多。
讲到这里，不得不提的是CssSprites技术，后者也是为了降低http请求。而将页面中很多细小的图片合并为一张大图。那么图片的base64编码和CssSprites有什么异同。又该怎样取舍呢？
所以，在这里要明白使用base64的一个前提，那就是被base64编码的图片足够尺寸小。
以博客园的logo为例：
如图所看到的，博客园的Logo仅仅有3.27KB，已经非常小了，可是假设将其制作转化成base64编码，生成的base64字符串编码足足有4406个,也就是说。图片被编码之后。生成的字符串编码大小一般而言都会比原文件稍大一些。即便base64编码可以被gzip压缩，压缩率能达到50%以上。想象一下，一个元素的css样式编写竟然超过了2000个字符，那对css总体的可读性将会造成十分大的影响，代码的冗余使得在此使用base64编码将得不偿失。
那么。是不是表示base64编码无用武之地呢？不然。当页面中的图片满足下面要求，base64就能大显生手。
假设图片足够小且由于用处的特殊性无法被制作成雪碧图（CssSprites），在整个站点的复用性非常高且基本不会被更新。那么此时使用base64编码传输图片就可谓好钢用在刀刃上，思前想后，符合这个规则的。有一个是我们常常会遇到的。就是页面的背景图background-image。在非常多地方，我们会制作一个非常小的图片大概是几px*几px，然后平铺它页面当背景图。
由于是背景图的缘故，所以无法将它放入雪碧图，而它却存在站点的非常多页面，这样的图片往往仅仅有几十字节，却须要一个http请求，十分不值得。那么此时将它转化为base64编码，何乐而不为？
以下是一个仅仅有50字节的2*2的的背景图。将其转化成base64编码，仅仅有100多个字符，相比一个http请求，这样的转换无疑更值得推崇。
CssSprites与Base64编码
简单陈述一下我对何时这使用这两种优化方法的看法。
使用CssSprites合并为一张大图：
- 页面具有多种风格，须要换肤功能。可使用CssSprites
- 站点已经趋于完美。不会再三天两头的修改（比如button大小、颜色等）
- 使用时无需反复图形内容
- 没有base64编码成本，减少图片更新的维护难度。
（但注意Sprites同一时候修改css和图片某些时候可能造成负担）
使用base64直接把图片编码成字符串写入CSS文件：
- 无额外请求
- 对于极小或者极简单图片
- 能够被gzip。（通过gzip对base64数据的压缩能力通常和图片文件差点儿相同或者更强）
- 减少css维护难度
- 可像单独图片一样使用，比方背景图片反复使用等
- 没有跨域问题，无需考虑缓存、文件头或者cookies问题
更便捷的将图片转化为Base64编码
将图片转化为base64编码有很多工具，比如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ，可是非常多这些站点是国外站点，常常被墙登陆不了。这里介绍一个更为快捷的方法，就是利用Chrome浏览器（我想FEer都应该有Chrome浏览器吧=。=）。
在chrome下新建一个窗体，然后把要转化的图片直接拖入浏览器，打开控制台，点Source。例如以下图所看到的。点击图片，右側就会显示该图片的base64编码，是不是非常方便。
以上摘自摘自ChokCoco的博客