Base64 Social Buttons

这个base64怎么做呀？有什么好用的工具么？

你还在用滚词么亲？

@Frannk 最近不再用，再背纸质书，刚刚去看了下滚词，挺不错的。可以在http://duri.me/ 里生成图片的base64，至于文本base64可以谷歌一下

data url而已。。。叫base64。。。

@perrydu 学生用纸质书是最好的。现在是硬件复兴的时代啊！

@Frannk
@perrydu
用得着那么麻烦么?
$ cat myimage.png | base64 > myimage_base64.txt

图片转换成base64后还增大了。不如把要使用的按钮放在一张图片里，用css切分。这样还快一些。

@jacy 不同意；
放在css的好处是好改动，css也好写，少了一次图片请求。

@alexrezit 帅呆了！

@Frannk
@perrydu
@alexrezit 用 Mac 的话试试这个 http://chrisyip.im/data-uri-converter/

@alexrezit
@chrisyipw
非常好的建议，感谢已发送

@jacy Data URI 有一个好处是 gzip，图片一般很难压缩，打比方，我有一个页面，分别用 Data URI 和普通 src 链接了同一张图，从 Chrome Developer Tools 观察到 HTML + Base64 大小为 27.87KB，gzip 后 20.43KB，图片是 17.29KB 和 17.57KB，传输时间平均值分别是 ~1.3s 和 ~1s。
虽然 base64 体积会比原文件稍大一点点，但是在 gzip 的影响下，一定尺寸内的文件还是建议能用 Data URI 就用，体验上会好一些：

- Data URI 可以省去 DNS lookup、connecting 和 waiting 的消耗（因为和包含它的文件共用了），消去了「比原文件稍大」的缺点；
- Data URI 不需要单独的请求也就意味着不需要进入请求队列，特别是对于某些需要尽快显示的图片来说，HTML 下载到它的位置就可以直接显示了。

除了会增大包含的文件的体积外，也有别的缺点：

- 不适合 lazy loading；
- 不适合图库类或需要交互的，比如 slideshow、fancybox。