介绍图片处理在前端工作中占有非常重要的一环。图片的base64编码可能有些人比较陌生。本文不从纯技术角度讨论图片的base64编码。标题略大，只是希望通过一些简单的讨论，让大家知道图片的base64编码是什么，为什么要用，怎么用，用起来方便，让大家知道在里面怎么用前端的实际工作使用它。什么是base64编码？我不说概念，切入正题，图片的base64编码就是将一对图片数据编码成一串字符串，用字符串代替图片地址。这样做有什么意义？我们知道我们在网页上看到的每一张图片都需要通过http请求来下载（于是csssprites技术应运而生，但是csssprites有其自身的局限性，下面会提到）。没错，不管怎样，图片的下载总是向服务器发送请求。如果图片的下载能在不向服务器发送请求的情况下与HTML下载同时下载到本地就好了，而base64正好可以解决这个问题question。那么图片的base64编码是什么样子的呢？举个栗子。www.google.com首页搜索框右侧的搜索小图标采用base64编码。我们可以看到：上面是用css写的图片，用html标签写的base64编码。Base64编码看起来像这样。当然base64编码不仅仅用在图片编码上，还有：thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa（不要抄袭我，我真的不是种子）嘿嘿，迅雷的“私信地址”也是用Base64加密的呀，有兴趣自己google一下，就不细说了。为什么要使用Base64编码？那为什么要用base64来传输图片文件呢？上面也提到了，因为它可以省去一个http请求。图片的base64编码可以看作是前端优化的一部分。虽然好处很小，但它们可以加起来。说到这里，就不得不提一下CssSprites技术，它也是为了减少http请求，将页面上的很多小图合成一张大图。那么图片的base64编码和CssSprites有什么异同，又该如何取舍呢？所以这里使用base64的前提是base64编码后的图片尺寸要足够小。以博客园logo为例：如图所示，博客园logo只有3.27KB，已经很小了，但是如果转换成base64编码，则生成了4406个base64字符串编码，即也就是说图片经过编码后，生成的字符串编码的大小一般会比原文件稍大一些。即使base64编码可以通过gzip压缩，压缩率也能达到50%以上。想象一下，一个元素的css样式写法超过2000个字符，对css的整体可读性会有很大的影响。冗余使得在这里使用base64编码不值得付出努力。那么，是不是说base64编码就没用了呢？不是的。当页面上的图片满足以下要求时，base64就可以大显身手了。如果图片足够小，因为具体用途不能做成Sprite图片（CssSprites），整个网站的复用性很高，基本不会更新。那么这个时候使用base64编码来传输图片可以说是钢的用武之地了。想了想，符合这个规则的就是我们经常遇到的一种，就是页面的背景图片background-image。很多地方，我们会做一个非常小的图，大概几px*几px，然后tile它作为背景图。因为是背景图，所以不能放到sprite图片中，但是在网站的很多页面上都有。这种图片往往只有几十个字节，却需要一个http请求，这是不值得的。那么这个时候为什么不转成base64编码呢？下面是一张2*2的背景图，只有50个字节。转成base64编码，只有100多个字符。与http请求相比，这种转换无疑更值得点赞。CssSpritesvs.Base64Encoding简要说明我对何时使用这两种优化的看法。使用CssSprites合并成一张大图：页面有多种样式，需要换肤功能。您可以使用CssSprites。网站已完善，两天内不会有任何变化（如按钮大小、颜色等）使用时无需重复图文内容无Base64编码成本，降低图片更新维护难度。（但注意Sprites同时修改css和images有时会造成负担）不会增加css文件大小使用base64直接将images编码成字符串写入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（CriticalRenderingPath，关键渲染路径）：当浏览器从服务器接收到一个HTML页面的请求时，要经过很多步骤才能将它渲染到屏幕上。浏览器完成这一系列操作，或者渲染出我们常说的“关键渲染路径”。通俗的说，图片不会挡住关键的渲染路径，但是转Base64后的图片会大大增加CSS文件的体积。CSS文件的大小直接影响渲染效果，导致用户长时间盯着空白屏幕。HTML和CSS块渲染，图像不会。2、页面解析CSS生成的CSSOM增加了时间。Base64和CSS混合在一起，大大增加了浏览器解析CSS树的耗时。其实解析CSS树的过程是非常快的，一般在几十微秒到几毫秒之间。CSS对象模型(CSSOM)：CSSOM是在网页上构建的CSS样式的映射。它类似于DOM，但只适用于CSS而不是HTML。CSSOM生成过程：CSSOM生成过程大致如下：解析HTML，在文档的head部分遇到一个link标签，引用外部CSS样式表，下载后按照上述过程生成CSSOM树样式表。这里我们需要知道的是，CSSOM阻止了任何东西被渲染，（意思是所有东西都不会被渲染，直到CSS被处理完），如果CSS文件中混入了Base64，那么（因为文件体积增加很大)解析时间将增长十倍以上。而且，最重要的是，增加的解析时间都在关键渲染路径上。所以，当我们需要使用Base64技术的时候，一定要意识到以上的问题，权衡使用（大家开发vue的时候应该用webpack打包，应该会发现有些图片会打包成base64webpack格式化，一般在1024字节以内）。
