Base64 Studio

图片转 Base64 在线工具

本地图片或在线图片 URL，一键完成 Base64 编码，生成 Data URI 与纯 Base64 —— 全程在浏览器本地完成，图片不会上传服务器。

粘贴图片或按 Ctrl+V查看支持的格式

选择图片

0 张
拖拽图片到此处，或点击选择文件
支持 JPG · PNG · GIF · WebP · SVG，也可直接 Ctrl+V 粘贴

提示：在线图片需目标站点允许跨域读取；若因 CORS 限制失败，请先下载图片再改用本地上传。

转换结果

等待选择图片
选择或拖入图片后，这里会显示转换结果…
复制成功或失败都会有明确提示

图片 Base64 转换：三种输入方式

三种进入方式，一套编码逻辑 —— 无论从哪条路径进来，看到的数据口径都一致。

这个工具做的事情始终是同一步：读出图片的字节，再把它重新表达为 ASCII 文本。无论字节来自文件选择器、拖拽、剪贴板还是远程地址，跑的都是同一条编码路径。也正因如此，结果区上方的体积数据在任何入口下都可以直接横向比较，不会出现「一个是实测、一个是估算」的情况。

方式一

选择本地文件

标准的文件选择框，已限定为图片类型。一次选中多个文件会作为一批处理，每张都在结果列表中单独保留一条记录。

方式二

拖拽或粘贴

把图片拖到页面任意位置即可，也可以按 Ctrl+V（macOS 为 Cmd+V）直接粘贴剪贴板内容 —— 对没有存盘的截图尤其方便。

方式三

从地址加载

粘贴图片链接即可完成图片 URL 转 Base64。这条路径同样能拿到真实字节数，跨域被拦截时的表现见下一节。

图片 URL 转 Base64

从其他站点取图是唯一可能因你无法控制的原因失败的一步，所以它失败得很明确，并且会解释原因。

工具会按顺序尝试两种策略。第一种是直接 fetch，优先使用它的原因是能拿到精确的字节长度 —— 你看到的原始大小与体积增幅是实测值而不是估算值。第二种是先用 <img> 载入图片再绘制到 canvas 上，它在目标站点允许跨域读取、但直接 fetch 被拦截时仍然可用。

如果目标站点禁止跨域访问，浏览器就会拒绝交出像素数据，两种策略都会失败。这是浏览器的安全策略，不是工具的缺陷，任何前端代码都无法绕过。遇到这种情况时，页面会给出具体原因和可执行的下一步：先把图片下载到本地，再改用本地上传——那条路径根本不跨越任何源。

为什么降级路径会重新编码为 PNG。canvas 只能导出它当前持有的像素，无法还原原始容器。走这条路加载的图片会以 PNG 形式返回，因此其 Base64 体积是近似值，格式也会显示为 PNG，哪怕源文件是 JPEG。直接 fetch 的路径没有这一限制。

一个图片 URL 会经历什么
步骤工具做了什么
规范化去掉首尾空白；只输入域名时自动补上 https://，因此 example.com/pic.png 与 https://example.com/pic.png 都能使用。
取回以不携带凭证的方式请求字节。返回的 content-type 不是图片时，在编码之前就会被拒绝。
校验格式由文件头的魔数字节实测识别，而不是相信响应头，因此 Data URI 的 MIME 前缀永远不会与它后面承载的载荷不一致。
编码字节按固定分块转换为 Base64，避免超大图片一次性展开导致调用栈溢出。

图片转 Base64 在线完成，图片不出本机

这里的「在线」指的是免安装、免注册，而不是说你的文件要先去别人的磁盘上转一圈。

网上大多数转换工具会把图片上传到服务器、在服务器上编码、再把文本传回来。这个工具不是这样：文件由浏览器自身的 FileReader API 读取，编码在页面内存中完成，字节从未离开这台机器。这不只是一个说法，你可以自己验证——转换时打开浏览器的网络面板，看不到任何携带图片的请求。

由此带来两个实际好处：一是不方便交给第三方的素材（内部截图、客户资料、带元数据的图片）在这里可以放心处理；二是没有上传大小限制与转换队列，也就不存在由服务器施加的容量上限。

设计如此

不上传、不排队、无次数限制

转换速度只取决于你自己的磁盘与 CPU；没有服务端在计数，因此也就没有每日次数限制。

可自行验证

打开开发者工具看一眼

按 F12 切到 Network 面板，然后转换一张图片：除了页面本身，没有任何额外请求。

Base64 编码到底对文件做了什么

Base64 存在的意义，是让二进制数据能够通过只接受文本的通道传输。代价是一份可预期的体积膨胀。

编码过程取 3 字节二进制数据（24 位），切成 4 组各 6 位，每组映射到 64 个可打印 ASCII 字符中的一个。于是每 3 字节变成 4 个字符：固定 4/3 的比例，也就是约 33% 的增幅。当输入长度不是 3 的整数倍时，末尾会用一到两个 = 补齐，使总长度为 4 的倍数。

结果面板中能看到的具体影响
影响说明
载荷增幅来自 4/3 的字符映射，约 +33%。一张 248 KB 的 PNG 会变成约 331 KB 的文本。
Data URI 前缀当你复制的是带前缀的形式而非纯字符串时，data:image/png;base64, 这一头部会固定多出 22 个字符。
传输开销文本的可压缩性很好，经过 gzip 或 brotli 之后，内联图片的实际传输代价往往远低于裸 Base64 给人的印象。
缓存这才是真正的取舍所在。内联图片无法独立于承载它的文档被缓存，因此文档每次被重新请求，它都会被重新传一遍。

什么时候适合用 Data URI

  • 小图标与 Logo，它们本来每个都要单独承担一次往返请求。
  • 需要自包含的场景 —— 邮件模板、单文件小工具，或作为单一资源发布的组件库。
  • 运行时生成的图片 —— canvas 导出后必须以字符串而非文件形式传递的内容。

什么时候不适合

  • 照片和较大的图。33% 的额外体积会与「失去独立缓存」「无法渐进解码」叠加在一起。
  • 单个资源超过大约 10 KB 之后。超过这个量级，独立请求几乎总是更划算。
  • 改动与页面无关的内容，因为任何一处变化都会让整个文档失效重传。

支持的格式与使用边界

可接受的输入
格式说明
JPG / JPEG通过 FF D8 标记识别，照片的常规选择。
PNG无损、支持透明通道，也是 canvas 降级路径导出的格式。
GIF按原始字节编码；页内预览只显示第一帧。
WebP通过 RIFF…WEBP 文件头识别。
SVG按文本读取，编码结果与原始代码逐字节一致，不经过二进制往返，因而不会被破坏。
BMP / ICO按原始字节编码并原样预览。

边界

  • 单张上限 10 MB。超出时会显示实际大小并拒绝转换，而不是中途静默失败。
  • 每批最多 20 张，结果列表保留最近 30 条。
  • 跨域图片需要目标站点授权。若目标站点未返回 CORS 头，浏览器会阻止读取，此时工具会明确说明，而不是返回一段坏掉的字符串。

常见问题

怎样把图片转成 Base64？

把图片拖入上传区、点击选择文件，或直接用 Ctrl+V（macOS 为 Cmd+V）粘贴剪贴板中的图片。工具在本地读取字节并立即返回 Base64 字符串，没有上传步骤也没有排队，文件读多快结果就出多快。

怎样把图片 URL 转成 Base64？

把图片地址粘贴到「图片 URL 转 Base64」输入框并点击加载。工具直接请求图片字节并编码，因此能给出精确的原始大小而非估算值。如果目标站点不允许跨域读取，浏览器会拒绝交出字节；此时工具会改用 canvas 方式重试，若仍被拦截，会明确提示你先下载图片再改用本地上传。

这个图片转 Base64 在线工具收费吗？

完全免费，无需注册，桌面端与移动端的现代浏览器都可以使用。所有转换都在页面内完成，没有安装步骤，也没有转换次数限制。

Base64 编码会让文件变大多少？

Base64 编码把每 3 字节二进制数据映射为 4 个 ASCII 字符，因此编码后的文本体积大约比原文件大 33%，再加上 data URI 前缀的少量字符。结果区上方的统计显示的是你这张图片的实测数值，而不是经验值。

支持哪些图片格式？

JPG、JPEG、PNG、GIF、WebP、BMP、SVG 与 ICO，单张上限 10 MB。SVG 按文本读取，编码结果与原始代码完全一致；结果中的格式来自文件头字节的实测识别，而不是文件名后缀。

拿到 Data URI 之后可以用在哪里？

可以直接放进 HTML 的 src 属性、CSS 的 background-image、Markdown 图片或 JavaScript 字符串。它最适合体积很小的图标与 Logo——省下一次网络请求；大图不建议内联，33% 的体积增幅和无法被浏览器单独缓存通常得不偿失。

图片会被上传到服务器吗？

不会。转换全程在浏览器内存中完成，字节不会被发送出去。你可以打开浏览器的网络面板确认：除了页面本身，没有任何额外请求。