任意文件转 Base64

功能

• 任意文件（不限类型）拖入即可，输出 Base64 与完整 data URL
• 头条给 data URL，一键复制 —— 可直接粘进 src、url() 或 JSON
• 列出文件名、原始体积、编码后体积、MIME 与实际长度
• MIME 为空时按 application/octet-stream 处理，不猜类型
• 明文说明 Base64 的代价（体积 +1/3、失去独立缓存），而不是只给结果
• 文件不上传，断网也能用

使用方法

1. 把文件拖进虚线框
2. data URL 出现在顶部，点右侧按钮复制
3. 下面的表里能看到体积、MIME 与编码后的长度
4. 粘到 `src`、`url()` 或 data 字段里即可

常见问题

base64 和 data URL 有什么区别？

Base64 是那段编码后的文本本身，data URL 则是带上了类型信息的完整地址：`data:image/png;base64,` 加上那段文本。粘进 `src` 或 `url()` 需要的是后者 —— 只给 Base64，浏览器不知道这是什么类型。工具两个都给，头条是能直接用的 data URL。

为什么不建议把图片都内联成 Base64？

三个代价。体积：Base64 比原文件大约三分之一（3 字节变 4 字符）。缓存：内联的资源跟着 HTML / CSS 走，改一个字就要重新下载整块，而独立文件可以单独缓存。并行：内联过后浏览器没法并行拉取那部分。经验判据是「几 KB 以内、且真的会用到」才内联 —— 小图标、1×1 占位图、一两百字节的小字体。大图请照常引用文件。

CSS 里可以内联多大的字体？

字体是最适合内联的一类：它阻塞文字渲染，多一次请求就多一段空白期（FOIT）。但一个中文字体动辄几 MB —— 那种要用子集化（只保留用到的字）之后的内联，而不是整个字体。西文字体通常在 10–30 KB，内联是常见做法。对中文字体来说，子集化比内联重要得多。

为什么有 4 MB 的上限？

因为 Base64 的产物是文本，要进 DOM 里显示与复制。4 MB 的文件会变成 5.5 MB 的字符串，浏览器渲染这么长的文本已经很吃力了。哈希工具能处理 512 MB 是因为它的产物永远是固定长度的摘要 —— 读多少与输出多长无关。更大的文件用命令行：`base64 -w0 输入 > 输出.txt`。