实用工具
把图片拖到这里
或者选择一个文件。处理全部在当前标签页完成,不会上传——这也是它能处理远超任何上传限制的大图的原因。
选择文件把图片编码成 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
- 图片内联