图匣 图像工具

TUXIA 图匣工具

图片 Base64 转换工具

将图片转换为 Base64 Data URL，或把 Base64 文本还原成图片预览，适合小图标、邮件模板、CSS 嵌入和开发调试。

双向转换 编码预览 复制下载
图片转 Base64

拖拽图片到这里，或 点击选择

PNG, JPG, WebP, SVG, GIF, BMP

Base64 转图片

在下方粘贴 Base64 字符串，页面会自动解码并预览：

工具指南

图片 Base64 转换工具指南和常见问题

将图片转换为 Base64 Data URL，或把 Base64 文本还原成图片预览，适合小图标、邮件模板、CSS 嵌入和开发调试。

图片Base64Base64转图片图片转Base64在线Base64图片转换Data URLTUXIA

Base64 编码将图片的二进制数据转换为纯文本字符串，可以直接嵌入 HTML、CSS、JSON 或其他文本格式中。这在需要把图片打包进单个文件的场景下非常实用——比如自包含的 HTML 邮件、单文件网页组件，或者不适合引用外部图片的 CSS 样式表。TUXIA 的图片 Base64 工具箱采用双面板布局：左侧面板将任意图片转为 Base64 Data URL，同时显示字符数和估算文件大小；右侧面板则让你粘贴任意 Base64 字符串，即时解码并预览还原后的图片。两项操作均在你的浏览器内通过 FileReader 和 Canvas API 完成，图片文件和 Base64 文本不会离开你的设备。

使用场景

CSS 与 HTML 内嵌

把小图标、Logo 和装饰元素以 Base64 Data URL 形式直接嵌入 CSS 或 HTML，消除额外的 HTTP 请求，特别适合单页应用、邮件模板和离线网页。

接口数据传输

通过 REST API 或 GraphQL 传输图片时，Base64 编码提供文本安全的格式，避免二进制数据在 JSON 序列化时损坏。

调试与测试

Base64 输出便于在日志中检查图片数据、对比不同格式的编码差异，或创建可复用的测试用例。

与其他方案比较

与需要上传图片到服务器的在线 Base64 转换工具不同，TUXIA 的所有处理都在浏览器本地完成，不存在文件大小限制（仅受浏览器内存约束），也无需等待上传。不过，Base64 编码本身不会压缩图片——如果你首要考虑的是文件大小，建议先用 TUXIA 的图片压缩工具处理，再进行编码。

技术说明

  • Base64 编码后的体积比原始二进制大约增加 33%，一张 1 MB 的图片编码后约为 1.33 MB。
  • 浏览器对超长 Base64 字符串在文本框中的处理性能有限，超过 2-3 MB 的图片建议改用直接文件传输。
  • `data:image/` 前缀指定了 MIME 类型，TUXIA 会根据检测到的图片格式自动添加正确的前缀。
  • 解码时，以 `data:image/` 开头的字符串被视为完整 Data URL，无前缀的原始 Base64 默认按 PNG 解码。

最佳实践

  • 尽量将 Base64 编码的图片控制在 10 KB 以内，图标、小 Logo 和内联图形是最佳选择，全分辨率照片则不适合。
  • 将 Base64 用于首屏图片，可以减少阻塞渲染的 HTTP 请求数量。
  • 在 CSS 中嵌入 Base64 时，把它放在样式表末尾或内联 `<style>` 块中，避免阻塞关键 CSS 的加载。
  • 投入生产前务必测试解码后的图片，确认尺寸、颜色和透明度均无误。

适合使用

  • 把 PNG、JPG、WebP、SVG、GIF 或 BMP 图片转换成 Base64 Data URL。
  • 粘贴 Base64 图片文本后预览还原结果，检查编码是否可用。
  • 复制图片 Data URL，用于 CSS、HTML、邮件模板、文档或测试数据。

使用方式

  1. 把图片拖入左侧区域，页面会生成 Base64 Data URL。
  2. 把 Base64 文本粘贴到右侧区域，预览解码后的图片。
  3. 确认结果后复制编码，或按需要下载还原后的图片。

常见问题

图片转 Base64 会上传到服务器吗？

不会。转换过程在浏览器本地完成，TUXIA 静态版不接收或保存你的图片。

Base64 适合大图片吗？

不太适合。Base64 会让文本体积变大，更适合小图标、测试数据和少量嵌入场景。