前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：

简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

为什么要用Base64？

我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个http请求下载而来的，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而base64正好能解决这个问题。

图片的Base64格式长什么样？举个例子，其实谷歌浏览器主页的LOGO就是用的Base64 格式，如下图：

 

红框里的URL地址就是Base64 格式的，其实还有大家非常熟悉的迅雷下载链接也是使用的Base64格式，例如：

thunder://QUFodHRwOi8vZGwxMzUuODBzLmltOjkyMC8xNzA4L+aImGwyW+mrmOa4heaKouWFiOeJiF0v5oiYbDJb6auY5riF5oqi5YWI54mIXS5tcDRaWg==

由此可见Base64不仅仅运用在图片方面！

那么怎么将本地图片转化成Base64格式呢？下面推荐一个在线转化工具：http://tool.css-js.com/base64.html

但是使用Base64也有缺点：

1.浏览器支持

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

2.增加了CSS文件的尺寸

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。

3.编码成本

图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。