图片转Base64 — 在线生成Data URI和CSS代码
在浏览器中完成图片与Base64、Data URI、CSS、HTML代码之间的互相转换
在浏览器中处理 · 不上传任何内容
把要转成 Base64 的图片拖到这里
一次一张，最大 5 MB。Base64 比原文件更大，适合小图标和 Logo。图片不会离开浏览器。
工具简介
这个工具把图片文件的字节改写成由字母、数字和少量符号组成的文本。这段文本可以作为data:image/png;base64,...形式的Data URI，直接写进HTML或CSS。所有处理都在浏览器中完成，反向操作——把Base64还原成图片——也在同一页面。
使用方法
- 选择图片 → Base64，拖入或选择一张图片：一次一个文件，最大5 MB。
- 在预览下方查看原文件大小、Base64文本大小、增长比例和体积建议。
- 在需要的框（Data URI、仅 Base64 字符串、CSS background-image或HTML img 标签）中点击复制。内容较长时只显示开头，但复制的是全部内容，也可以下载为文本文件。
- 反向转换时选择Base64 → 图片，粘贴Base64或data URI，就会出现预览和下载图片按钮。
工作原理
- 编码：标准Base64（RFC 4648），3个字节转为4个字符，用
=补齐到4的倍数。直接转换文件的字节而不是文本字符串，因此任何图片都能原样还原。 - MIME类型：根据文件开头的字节判断（JPEG、PNG、GIF、WebP、SVG等），写在
data:之后。文件扩展名不对也没关系。 - HTML标签：能读出图片尺寸时会自动加上width和height。
- 体积建议：10 KB以内适合内嵌，超过50 KB需要再考虑，超过500 KB应上传后用链接引用。
- 解码：支持URL安全的Base64（
-和_），缺少=补位也能识别。如果标注的类型和实际图片不同，会采用实际类型并提示你。不读取没有;base64的data URI。
示例
| 项目 | 值 |
|---|---|
| 原文件 | 2.1 KB的图标 |
| Base64文本 | 约2.8 KB（+33%） |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
常见问题
图片会被上传吗？
不会。读取文件和编码成Base64都在浏览器内完成，生成的文本也不会保存在任何地方。
为什么Base64会让数据变大？
Base64用4个字符表示3个字节，所以文本比原文件大约三分之一（33%）。而且内嵌在HTML或CSS中时，浏览器无法单独缓存这张图片，每次打开页面都要重新下载。
图片多大时就不适合用Base64了？
没有硬性规定，一般10 KB左右的小图标、Logo、加载动画会内嵌，超过约50 KB的图片保留为普通文件。工具按10 KB以内、50 KB以内、500 KB以内和更大四档提示你当前属于哪一档。大图最好上传后用链接引用。
Data URI适合用在哪里？
HTML的img src、CSS的background-image url()、邮件签名、Markdown文件，或者希望图片随文档一起携带的单文件HTML页面。不需要额外的图片文件，不过有些邮件客户端会屏蔽Data URI图片。
解码时提示数据无效怎么办？
data URI前缀可有可无，空格和换行会被忽略，也可以粘贴整段CSS或HTML代码，工具会自动找出其中的data URI。如果仍然失败，多半是文本被截断或混入了多余字符。不是图片的数据会被拒绝。
超过5 MB的图片怎么办？
几MB的Base64会拖慢浏览器，也很难粘贴到别处，所以只接受一张5 MB以内的图片。更大的图片请先用图片压缩或调整图片尺寸工具缩小。
