base64:URL背景图片与web页面性能优化

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息。
base64编码就是长得像下面这样子的代码：
thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

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编码作为background-image图片就是本文要着重阐述的。

使用base64:URL的优缺点

个人觉得base64:URL传输图片文件的好处在于：

• 减少了HTTP请求
• 某些文件可以避免跨域的问题
• 没有图片更新要重新上传，还要清理缓存的问题

不足在于：

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

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

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

优缺点权衡下的实际应用价值

有时base64编码作为background-image背景图片利要远大于弊的：

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

使用base64编码代替CSS背景图片是有局限性的，并不是所有图片都适合使用base64编码这种技术的。例如：

• base64编码图片后期维护会死人，只能是独立图片
• 图片尺寸过大，CSS文件就会变成了臃肿的大棒子，反而不利于加载
• CSS文件的优点就是重用，因此，如果背景图片就一个地方使用，减少的请求数有限，考虑到其他成本，还不如直接使用普通url图片地址
• 如果图片经常改动，好吧，哥们，苦逼的前端加班仔中就多了一个你