图片转 Base64

图片转 Base64 工具可以把图片文件变成一段 Base64 编码的 Data URI，直接粘进 HTML、CSS、JSON 或源代码。它支持 PNG、JPEG、GIF、WebP、SVG 和 BMP，会精确报告编码让文件膨胀了多少，并且完全在浏览器中运行——图片绝不会被上传。

如何使用

1. 把图片拖到上传区，或点击选择 PNG、JPEG、GIF、WebP、SVG 或 BMP 文件。
2. 预览立即出现，工具用 FileReader API 读取文件。
3. 查看四项统计：MIME 类型、原始大小、Base64 大小和增幅百分比。
4. 一键复制完整的 Data URI（含前缀）。
5. 把它粘贴到原本放 URL 的位置——img src、CSS background-image 或 JSON 字段。

放置方式很重要。在 HTML 里字符串直接进入属性：<img src="data:image/png;base64,iVBORw0KGgo...">；在 CSS 里放在带引号的 url() 中：background-image: url("data:image/svg+xml;base64,PHN2Zy...");；在 JSON 里就是一个普通字符串值。MIME 类型和 base64 之间的分号务必保留，删掉会让 URI 失效、图片静默加载失败。CSS 中一定要给值加引号，因为未加引号的 Data URI 可能被 SVG 内容里的 ) 提前截断。

33% 开销背后的算术

Base64 使用 64 个字符的字母表，因此结果可以安全地放进纯文本通道。每 3 个输入字节映射为 4 个输出字符，由此得到固定比例：

编码长度 = ceil(字节数 / 3) × 4

工具反向推算原始大小：取 Base64 载荷长度乘以 3/4，再为结尾的 = 补齐减去 1 或 2 个字符。这就是”原始大小”几乎与文件完全一致的原因。可见开销就是 33.3% 加上短短的前缀——例如 data:image/png;base64, 是额外的 22 个字符。

当字节数不能被 3 整除时就会出现补齐。余 1 个字节产生 2 个字符加 ==；余 2 个字节产生 3 个字符加 =；长度正好是 3 的倍数时结尾没有补齐。没有这项修正，编码字符串会显得比实际略大，减掉之后估算才诚实。

实操示例

源文件	Base64 载荷	显示增幅	约计 Data URI
1 KB 图标	约 1.37 KB	约 33.3%	含前缀约 1.39 KB
10 KB Logo	约 13.7 KB	约 33.3%	含前缀约 13.7 KB
100 KB 照片	约 133 KB	约 33.3%	含前缀约 133 KB

比例恒定，变的只是绝对字节数。4 KB 的 PNG 和 4 MB 的 PNG 都增大约三分之一。

内联 Data URI 占优的场景

• 图标、favicon 和小 Logo——否则每次页面加载都会多一次 HTTP 请求。
• 单文件 HTML 文档和离线演示，必须不依赖外部资源。
• JSON 载荷需要在没有 multipart 上传的情况下携带缩略图。
• 已知邮件客户端能渲染 Data URI 的邮件模板。
• 极小装饰纹理的 CSS background-image 规则。

内联 Data URI 吃亏的场景

每个 Data URI 都嵌在文档里，无法被单独缓存。如果同一个图标出现在二十个页面上，浏览器会下载那份字节二十次而不是一次。编码还会让每个资源膨胀三分之一，而样式表里过大的 Data URI 会在解析时阻塞渲染。对大约 10 KB 以上的图片，带正确缓存头的外部文件几乎总是更划算。

算一笔账就清楚了。6 KB 图标内联在共享样式表里只会被取一次，但同样的图标粘进每个页面的 HTML 就会被取二十次——传输 120 KB，而外部文件首次加载只需 6 KB、之后为零。把一个小图标集都这么处理，总量迅速膨胀。经验法则：只有图片极小、且单独一次请求的代价超过编码开销时才内联。

准确性与局限

• 大小数字来自解码后的 Base64 长度，而不是重新统计文件字节数，因此在补齐异常的文件上可能差一两个字节。
• 工具只做编码，不做压缩。PNG 还是 PNG，JPEG 还是 JPEG。
• 内联图片不会被自动优化，大照片值得先过一遍压缩器再编码。
• 前缀必须使用正确的 MIME 类型。标成 image/jpeg 的 PNG 也许仍能显示，因为浏览器会嗅探字节，但严格的工具链会拒绝它。
• 超长字符串难以存储和审阅。编辑器会变慢，某些构建管线还会截断几百 KB 以上的值。
• 复制使用现代 Clipboard API，并为旧浏览器提供回退；在部分浏览器上回退方案需要用户手势触发。

相关工具

• Base64 编解码——编码和解码任意文本，不只是图片。
• 图片压缩——内联前先缩小图片。
• 图片格式转换——编码前切换格式。