Skip to main content
UFOZoo

图片转Base64 在线图片转DataURL工具

在线图片转Base64工具：将JPG、PNG、WebP转为Base64 data URL，可直接用于HTML的<img>标签或CSS背景图，支持解码还原图片。

更新于 2026-08-16

相关工具

Base64编解码 在线Base64编码解码工具

文本转二进制 在线编码解码二进制转换工具

图片格式转换 在线HEIC/JPG/PNG/WebP互转

ASCII转换 在线编码解码与ASCII码表

乱码修复 在线检测文件编码并修复乱码工具

十六进制转文本 在线十六进制编解码转换工具

功能特性

  • 将图片转换为Base64数据URI，支持JPG、PNG、WebP、GIF、SVG等格式
  • 支持拖拽打开和点击选择文件
  • 一键复制Base64字符串到剪贴板
  • 将Base64数据保存为.txt文件
  • 打开后自动预览图片
  • 显示原始文件大小和Base64字符串长度
  • 支持将Base64解码还原为可保存的图片
  • 输入文件无文件大小限制
  • 适合嵌入HTML的<img>标签、CSS background-url或JSON数据中

使用方法

  1. 1点击文件区域或拖拽图片文件到浏览器中。
  2. 2查看图片预览和文件信息（名称、大小、类型）。
  3. 3复制生成的Base64数据URI。
  4. 4粘贴到HTML中：<img src="data:image/png;base64,..." />
  5. 5在CSS中使用：background-image: url('data:image/png;base64,...');
  6. 6在JSON API中作为字符串传输图片数据。
  7. 7切换到解码模式，粘贴Base64字符串预览并保存还原的图片。
  8. 8每次转换即时完成，支持连续打开多张图片。
  9. 9点击保存按钮将Base64保存为.txt文件备用。
  10. 10如需缩短Base64字符串，可先使用图片压缩工具缩小尺寸。

常见问题

什么是Base64编码？

Base64是一种把二进制数据转为ASCII字符串的编码方式。图片转base64后可以直接嵌入HTML、CSS和JSON中，无需额外的文件请求。

如何在HTML中使用Base64嵌入图片？

将生成的data URI作为src属性：<img src="data:image/png;base64，你的Base64字符串" alt="描述" />。从此工具复制完整字符串粘贴即可。

Base64编码会增加文件体积吗？

是的，Base64编码会使文件体积增加约33%。建议仅对小图片（图标、Logo）使用Base64嵌入，此时省去HTTP请求的收益大于体积增加的开销。

支持哪些图片格式？

这个图片转base64工具支持所有常见格式：JPG、PNG、WebP、GIF、SVG、BMP、ICO、AVIF。输出的data URI会自动包含正确的MIME类型。

有文件大小限制吗？

没有限制。转换完全在浏览器中使用JavaScript的FileReader API完成。但超大文件会产生很长的Base64字符串，可能不适合直接嵌入。

能将Base64解码还原为图片吗？

可以。切换到解码模式，粘贴Base64 data URI即可预览图片并保存还原为原始格式。

Base64 编码的原理是什么？为什么字符串更长？

每 3 个字节（24 位）被拆成 4 组 6 位，每组映射到 64 个字符之一，所以体积变为原来的 4/3，大约多 33%。数据长度不是 3 的倍数时还会补上 = 填充符。因此 1MB 的图片转出来大约是 1.33MB 的字符串。

Base64 字符串和 Base64 URL 有什么区别？

真正能用的形式是 data URI：data:image/png;base64,<字符串>。大家说的「Base64 URL」通常就是指这个带 MIME 前缀的 data URI；只有原始字符串没有前缀，无法直接渲染。URL-safe Base64（用 - 和 _ 代替 + 和 /）是给查询参数用的另一套变体，不用于图片嵌入。

什么情况下用Base64而不是文件URL？

Base64适合小图片直接嵌入（图标、favicon、邮件签名）。大图片建议使用文件URL，避免HTML/CSS/JSON体积膨胀。

什么是data URI？

data URI是以'data:'开头的URL，包含MIME类型和Base64编码的数据。图片转成data URL后可以直接嵌入网页文档，无需外部资源请求。

能转换视频或音频到Base64吗？

本工具专为图片设计。如需对其他文件类型编码，请使用我们的Base64编解码工具，支持任意文本和二进制数据。

为什么我的 Base64 图片在 HTML 或 CSS 里显示不出来？

最常见的原因：字符串被截断（邮件客户端和部分编辑器会折行或截断长行）、data:image/...;base64, 前缀缺失或被换行拆开、或引号与属性引号冲突。把字符串粘贴回本工具的解码区验证完整性；如果能预览，说明数据完整，问题出在粘贴方式。在 HTML 中，整个 data URI 必须保持在一行内放在属性里。

SVG 文件有什么需要注意的问题吗？

有一个值得知道的点：SVG 本质是 XML 文本，浏览器通常更喜欢 URL 编码的 SVG data URI（data:image/svg+xml,... 用 %3C 表示 <），而不是 Base64 版本，因为某些环境会对 base64 载荷做额外解码。本工具输出的 Base64 版本在所有主流浏览器中都能用，但如果遇到边缘问题，改用 encodeURIComponent 编码 SVG；由于 SVG 文本用百分号编码压缩更好，生成的字符串通常也更短。

我把 Base64 字符串发给别人，对方为什么打不开图片？怎么发才对？

裸的 Base64 字符串不是图片文件，它只有在 data URI 里或经过解码后才能渲染。直接在聊天或邮件里发一串文本，对方拿到的是没法打开的文字。正确的分享方式：直接发图片文件本身；把 data URI 嵌进 HTML 页面或邮件（注意客户端可能截断长行）；或把本工具「保存」按钮生成的 .txt 文件发给对方，并提示他粘贴到解码区还原图片。