实用工具

图片转 Base64

把图片变成可以直接粘进 CSS 或 HTML 的 data URL。

浏览器本地运行图片与颜色4361
免费
把图片拖到这里

或者选择一个文件。处理全部在当前标签页完成,不会上传——这也是它能处理远超任何上传限制的大图的原因。

选择文件

把图片编码成 data URL,让它能直接待在样式表、HTML 文档或 JSON 载荷里,不用单独发一次请求。对一个本来要花掉一次往返的小图标值得这么做;对照片则不值得,因为 Base64 会让字节数涨三分之一,而且结果无法与承载它的文档分开缓存。

它是怎么工作的

  • 文件在你的浏览器里读取并编码,不会上传。
  • 默认输出完整的 data: URL,关掉开关则只输出裸的 Base64 内容。
  • Base64 会让任何文件大约变大 33%——这是只用文本安全字符所付出的代价。

你的数据去了哪里

哪也没去。本工具完全在你的浏览器里运行:你粘贴的文本由页面处理,不会传输到任何服务器,也不会写进任何日志。

当一次运行消耗积分时,会向你自己的历史里保存一行摘要,方便回头查找。摘要记录的是这次运行的形态——大小、数量、你查询的值——而不是你粘贴的内容。

它要花多少

单次 512.0 KB 以内免费,无需账号。超出部分每次运行消耗 1 积分,并保存到你的历史记录。

积分来自注册、每日签到、发表评论和完善资料。

了解积分规则

常见问题

什么时候内联图片才真正划算?
大约 2–4KB 以内:图标、小 logo、背景纹理。低于这个尺寸,省下的一次往返超过 33% 的膨胀。超过之后,你是在让文档变大、变得不可缓存,只为省下一次 HTTP/2 本来就会复用连接的请求。
结果怎么用在 CSS 里?
background-image: url("data:image/png;base64,…")——要保留包含前缀在内的整个 data: URL。在 HTML 里则直接放进 img 标签的 src。
生成的 data URL 为什么这么长?
因为它就是整个文件以文本形式呈现,再加三分之一。一张 40KB 的 PNG 会变成约 54KB 的字符。这是正常的,也正是只该内联小图的原因。

背后的开源项目

本工具是独立实现,并未打包第三方库。dankogai/js-base64(BSD-3-Clause)在代码层面做的是同一件事——如果你需要在自己的程序里实现它,从那里开始,而不是调用一个网页。

dankogai/js-base64

也常被称作

  • 图片转base64
  • base64图片编码
  • data url生成
  • png转base64
  • 图片内联