Base64 Social Buttons

[perrydu]

原理非常简单，将分享按钮的图片转换为base64编码并放入css中，这样就能够更快加载分享按钮，目前有20个主流的按钮。（不知道有没有重复造轮子，至少在github上没有搜到）
Demo: http://perry.asia/Base64-Social-Buttons/
github: https://github.com/Perrydu/Base64-Social-Buttons/

[Frannk]

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

你还在用滚词么亲？

[perrydu]

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

[binux]

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

[Frannk]

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

[alexrezit]

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

[jacy]

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

[Frannk]

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

[Frannk]

@alexrezit 帅呆了！

[chrisyipw]

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

[perrydu]

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

[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。