关于图片的Base64编码

什么是Base64编码

Base64编码是一种图片处理格式，经过特定的算法将图片编码成一长串字符串，在页面上显示的时候，能够用该字符串来代替图片的url属性。

base64编码就是长得像下面这样子的代码：

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代码你们都熟悉吧，迅雷下载连接哦，就是base64编码后的地址，因此之后看到这种：一堆连续字母，最后有1~2个"="的代码就是base64。Base64编码并不仅是用在图片处理上，还能够用在URL转换上，好比上述咱们常见的迅雷以thunder开头的专用地址，就是经过Base64加密处理事后的URL地址。

base64:URL就是URL地址是base64编码的。

例以下面这个：

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

 

base64与文件数据编码

在网络中，经过HTTP传输的文件还能够经过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。固然，能够base64编码的文件不单单是图片，也能够是字体文件，例如(中间有缺省)：

@font-face{

    font-family: forTest;

    src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

}

天然，对于background-image图片，咱们也可使用base64编码进行传输，例如：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

 

使用base64:URL的优缺点

base64:URL传输图片文件的好处在于：

1减小了HTTP网络请求。

咱们都知道，网页上的图片资源若是采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会形成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就能够减小http请求的次数，对于网页优化是一种比较好的手段。

2采用Base64编码的图片是随着页面一块儿加载的，不会形成跨域请求的问题。

3没有图片更新要从新上传，不会形成清理图片缓存的问题

不足在于：

1 浏览器支持

使用base64编码图片做为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持）。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优势不存在了。

2 增长了CSS文件的尺寸

当咱们将一个只有几KB的图片转化为Base64格式编码，生成的字符串每每会大于几KB，若是将其写在一个css文件中，这样一个css文件的大小会剧增，形成代码可读性差不说，还会形成请求传输的数据量递增。

3 形成数据库数据量的增大

若是咱们将Base64位的编码的图片存入数据库中，会形成数据库数据量的增大，这样的效果还不如将图片存至图片服务器，而只在数据库中存入url字段。

 

什么时候使用

分析了Base64编码的优劣，那么咱们该如何正确的使用Base64编码呢？这里总结出使用Base64编码的几个地方。

• 这类图片不能与其余图片以CSS Sprite的形式存在，只能独行
• 这类图片从诞生之日起，基本上不多被更新
• 这类图片的实际尺寸很小
• 这类图片在网站中大规模使用

对于极小或者极简单的图片，例如只有几像素的图片，不用考虑跨域问题也不想页面的图片缓存，果断用base64。