想这样直接在CSS里写上图片的编码的做法好么

[Air_Mu]

不好意思，不懂这个正式名称叫什么..只得这样起标题。

经常看到一些网站在使用比较小的图片时直接这样写:

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAA.............)。
这样有什么好处呢？

[wzxjohn]

Base64编码。理论上可以减少Http请求的发起次数，可以加快页面访问。

[Air_Mu]

恩 去搜了下BASE64图片 关键词，看了一些文章。这个对网页中多次使用的图片很有效果。但是悲剧的IE7不支持..

[lingyired]

我的建议：
如果你的网站部考虑兼容性（主要是旧版本浏览器）的话，可以考虑使用。

BASE64 图片，确实可以减少HTTP 请求，但也不要盲目的使用。

BASE64 是将文件转换成字符串，你的文件多大，出来的字符串也是多大。

因此，你需要考虑的是：
避免CSS 过大而影响加载的体验，比如你一张500K 的背景图片，就不适合用BASE64 的方式堆进CSS，因为这样会让CSS 大了500K，从而使得CSS 加载慢，可能影响加载时候的体验。
相反，一些小图标就很适合（几K甚至1K-）。

如果你不喜欢CSS 切图的话，将小图片用Base64 的形式嵌入CSS 也是可取的。

大图还是用回图片格式，小图可用Base64 代替，如果图片多的话，不妨单独用一个CSS 来装载这些Base64 的样式，避免主体CSS 加载过久。


另，有一篇文章写得更详细，可以去参考：

http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/

[lianghai]

@lingyired:「你的文件多大，出来的字符串也是多大」这句话不对吧？

[shiny]

BASE64 编码过后的字符串尺寸更大（借助于gzip可能情况稍微好一点）

如果有多个小图，可以用这种方式来减少http请求数；其他情况下则不太适用。

[Kaiyuan]

Base64 编码体积会比原来的文件更大的，不过我用 Base64 编码把一个 ttf 文件嵌入 CSS 里面解决 Firefox 跨域 Webfont 问题。

[liyandong]

如果你不考虑IE6\7就可以使用。大图片不建议~~~

[allenm]

BASE64 编码出来的字符串会比原来的文件体积大，可以看这里： http://blog.allenm.me/2012/11/base64-encoding/ 不过启用 GZIP 之后，应该会减少体积的增加量。

[lingyired]

@lianghai 嗯，感谢告之