弁言
图片处理在前端事情中可谓霸占了很主要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生，本文不是从纯技能的角度去谈论图片的 base64 编码。标题略大，不过只是希望通过一些浅近的论述，让你知道什么是图片的 base64 编码，为什么我们要用它，我们如何利用并且方便的利用它，并让你懂得如何去在前真个实际事情中利用它。
什么是 base64 编码?
我不是来讲观点的，直接切入正题，图片的 base64 编码便是可以将一副图片数据编码成一串字符串，利用该字符串代替图像地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是须要花费一个 http 要求下载而来的（所有才有了 csssprites 技能的应运而生，但是 csssprites 有自身的局限性，下文会提到）。
没错，不管如何，图片的下载始终都要向做事器发出要求，假如图片的下载不用向做事器发出要求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 恰好能办理这个问题。
那么图片的 base64 编码长什么样子呢？举个栗子。www.google.com 的首页搜索框右侧的搜索小图标利用的便是base64编码。我们可以看到：
上面分别是图片的 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 字节的22的的背景图。将其转化成 base64 编码，只有 100 多个字符，比较一个 http 要求，这种转换无疑更值得推崇。
CssSprites与Base64编码
大略陈述一下我对何时这利用这两种优化方法的意见。
利用CssSprites合并为一张大图：
页面具有多种风格，须要换肤功能，可利用CssSprites网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）利用时无需重复图形内容没有 Base64 编码本钱，降落图片更新的掩护难度。（但把稳 Sprites 同时修正 css 和图片某些时候可能造成包袱）不会增加 CSS 文件体积利用base64直接把图片编码成字符串写入CSS文件：
无额外要求对付极小或者极大略图片可像单独图片一样利用，比如背景图片重复利用等没有跨域问题，无需考虑缓存、文件头或者cookies问题更便捷的将图片转化为Base64编码
将图片转化为 base64 编码有许多工具，例如本文中我所利用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ，但是很多这些网站是国外网站，常常被墙上岸不了。这里先容一个更为快捷的方法，便是利用 Chrome 浏览器（我想 FEer 都该当有Chrome 浏览器吧=。=）。
在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开掌握台，点 Source，如下图所示，点击图片，右侧就会显示该图片的 base64 编码，是不是很方便。
一些误区
Base64 虽有优点，但是缺陷也很明显，在利用上存在一些明显的毛病。
1. 利用 Base64 不代表性能优化
是的，利用 Base64 的好处是能够减少一个图片的 HTTP 要求，然而，与之同时付出的代价则是 CSS 文件体积的增大。
而 CSS 文件体积的增大意味着什么呢？意味着 CRP 的壅塞。
CRP（Critical Rendering Path，关键渲染路径）：当浏览器从做事器吸收到一个HTML页面的要求时，到屏幕上渲染出来要经由很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”。
普通而言，便是图片不会导致关键渲染路径的壅塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会永劫光注目空缺屏幕。HTML 和 CSS 会壅塞渲染，而图片不会。
2. 页面解析 CSS 天生的 CSSOM 韶光增加
Base64 跟 CSS 混在一起，大大增加了浏览器须要解析CSS树的耗时。实在解析CSS树的过程是很快的，一样平常在几十奇妙到几毫秒之间。
CSS 工具模型 (CSSOM)：CSSOM是一个建立在web页面上的 CSS 样式的映射，它和DOM类似，但是只针对CSS而不是HTML。
CSSOM 天生过程：
CSSOM 天生过程大致是，解析 HTML ，在文档的 head 部分碰着了一个 link 标记，该标记引用一个外部 CSS 样式表，下载该样式表后根据上述过程天生 CSSOM 树。 这里我们要知道的是，CSSOM 阻挡任何东西渲染，（意味着在CSS没处理好之前所有东西都不会展示），而如果CSS文件中混入了Base64，那么（由于文件体积的大幅增长）解析韶光会增长到十倍以上。
而且，最主要的是，增加的解析韶光全部都在关键渲染路径上。
以是，当我们须要利用到 Base64 技能的时，一定要意识到上述的问题，有取舍的进行利用（大家在开拓vue的时候，合营webpack打包，该当会创造有一些图片会被webpack打包成base64格式，一样平常是1024个字节以内的）。
