Base64 Social Buttons

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4333 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

按钮

GitHub

11 条回复 • 1970-01-01 08:00:00 +08:00

Frannk

2013-01-05 21:57:02 +08:00

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

你还在用滚词么亲？

perrydu

2013-01-05 22:02:49 +08:00 via iPhone

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

binux

2013-01-05 22:04:04 +08:00

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

Frannk

2013-01-05 22:06:20 +08:00

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

alexrezit

2013-01-06 18:53:05 +08:00

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

jacy

2013-01-06 18:59:02 +08:00

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

Frannk

2013-01-06 19:19:40 +08:00

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

Frannk

2013-01-06 19:20:01 +08:00

@alexrezit 帅呆了！

chrisyipw

2013-01-06 20:34:42 +08:00

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

perrydu

2013-01-06 23:28:23 +08:00 via iPhone

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

chrisyipw

2013-01-07 03:08:51 +08:00

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