图片的base64编码

导语

前端对图片的处理一直以来是一个非常值得研究的点。这里简单的介绍其中的一种：图片的base64编码

什么是base64编码

Base64就是一种编码格式。Base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节。编码后的字符串理论上比原本的数据长三分之一。
图片的base64编码就是将一幅图片的数据编码成字符串，使用这个字符串来代替图像的地址。

base64编码图片的优缺点

网页上的所有图片，都是要一个http请求下载来的。举个例子你的博客里有4张图，采用的是网络链接取址，那么就会有4个http request去那些图片的地址将图片下载到浏览器的缓存来渲染页面，再加上本来需要下载html的一个request，整来就少说5个了。一般大家会整个图床啥的，这样问题也不是很大，因为request的负载都到图床去了，但是也有人在自己的服务器上搞相对地址，在并发高的情况下很有可能自己服务器就撑不住了。而base64是和html的request一起传输的，因此就会少很多的request。同时也不会有跨域请求，不需要定时清理图片的缓存了。
但是base64之后的字符串长度惊人，常常会分割代码，让整个代码非常的不好读。我们的md有一个id调用的方法来缓解。此外有些浏览器对base64图片不支持（IE8以下，应该没人还在用这了吧），也有些浏览器对base64的大小有限制。

优点

①减少了网络请求：采用http形式的url的话都会额外发送一次请求