Base64 为什么会变长
Base64 把 3 个字节搬成 4 个字符,所以结果比原文件长三分之一左右。再加上 data:image/png;base64, 这样的前缀和换行,还会更长一些。5MB 的图片转出来的字符串大约有 6.7MB。
data: URI 用在哪里
用在没办法单独放一个文件的地方:CSS 的 background-image、HTML 的 <img src>、需要把图片带在正文里的邮件签名。把几个很小的图标内联进去,也能少几次请求。
什么时候不该用
data: URI 没有自己的网址,既没法单独被引用,也没法复用。需要同一张图的页面各自带一份副本;而且只要换掉这一张图,装着它的整份样式表缓存就全部作废。直接写进 HTML 更麻烦,因为 HTML 通常不做缓存,每次访问都要重新传一遍这些字节。背景大图这类图片,还是留成文件再链接过去更快。内联比较稳妥的上限,大约是 1KB 的小图标。
为什么另有 URL-safe 版本
标准 Base64 用 + 和 /。这两个字符在网址和文件名里另有含义,所以放进地址时改用 - 和 _ 的 URL-safe 版本,末尾的 = 填充通常也一起省掉。JWT 就是这么写的,本工具两种写法都能接收。