在线图片转 Base64 工具：支持拖拽上传、粘贴图片，一键生成 Data URI。适用于内联图片、CSS background-image、数据传输。
摘要：免费的图片转 Base64 工具，支持拖拽上传与粘贴，一键生成 Data URI，适用于内联图片与 CSS。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
使用指南
把图片转成 Base64，按场景切换输出形态：完整 Data URI、纯 Base64、HTML img、CSS url() 或 Markdown 图片语法。转换在浏览器本地完成，图片不上传；页面会显示原文件体积与编码后大约涨多少（约 +33%），超过约 100KB 时给出内联体积警告，方便决定要不要先压缩。
1. 怎么用
大图请先走「图片压缩」再编码——先压再 Base64，通常比「先编码再想办法」更划算。还原预览用「Base64 转图片」。
- 点击上传、拖入或粘贴图片（剪贴板截图也行）。
- 在输出区切换格式芯片：Data URI / 纯 Base64 / HTML img / CSS url() / Markdown；HTML/Markdown 可填 alt 文本。
- 对照体积提示（编码字符数与膨胀百分比），一键复制到 HTML、CSS、JSON 或文档。
2. 什么场景值得内联
- 小 logo、icon、loading 动画首帧：省一次 HTTP 请求，首屏立刻可见。
- 邮件模板：部分邮件客户端对外链图片拦截严格，内联更稳（仍建议压到约 20–30KB 内）。
- 接口载荷：把小图直接放进 JSON 上报或配置，省掉图床依赖——此时常用「纯 Base64」芯片。
3. 一个必须知道的代价
Base64 会比原文件大约 33%，且内联进 HTML/CSS 后无法被浏览器单独缓存——大图内联会让每次页面访问都重复传输它。经验上：数 KB 级小图内联收益高；接近或超过约 100KB 时页面会警告，更应改走独立文件 + 长缓存。这是权衡而不是规范，首屏关键小图内联、其余外链是常见取舍。
4. 五种输出形态怎么选
- Data URI：直接塞进 src 或部分配置字段，自带 data:image/...;base64, 前缀。
- 纯 Base64：给已经自己拼前缀的接口或 SDK。
- HTML img / CSS url() / Markdown：按文档或样式表语境一键生成可粘贴片段；img 与 Markdown 记得写好 alt。
5. 格式与隐私
常见位图（PNG/JPEG/GIF/WebP/BMP 等）走文件读取即可；转换不经过服务器，适合含证件、聊天记录截图等敏感图。仍要注意：复制到聊天工具或工单后，Base64 会进入对方系统——本地转换不等于「此后永不泄露」，只是本站不经手。若必须把 Base64 写进仓库，优先放私有配置或构建期注入，避免把带隐私的 Data URI 永久写进公开前端包。
6. 和压缩、格式转换的搭配
先把图缩到实际展示尺寸并压缩，再 Base64；先转 WebP/JPEG 再编码，往往比「PNG 原图直接 Base64」小一个数量级。需要反向校验时，把 Data URI 贴回 Base64→图片工具看是否损坏。体积警告出现时，优先压缩而不是关掉提示继续内联。同一张图若要同时给网页与邮件用，分别压到各自阈值再编码，比共用一份过大的 Base64 更稳——邮件客户端对体积尤其敏感，网页还可以靠 HTTP 缓存分担。把 Base64 塞进 CSS 时留意选择器复用：同一 Data URI 写很多次会让样式表膨胀，抽成一处自定义属性或背景工具类更干净。
7. 输出格式与体积
可切换 Data URI、纯 Base64、img 标签、CSS background、Markdown 图片语法。嵌入 HTML/CSS 前确认体积：Base64 大约膨胀三分之一，大图更适合先压缩或外链。全程本地读取文件，不上传；含隐私截图时注意屏幕分享与剪贴板残留。
常见问题
适合在本页处理：图片只在浏览器里读取并编码，不经过服务器。但复制出去之后就交给对方系统了——贴进聊天或工单前想清楚；若必须把 Base64 写进仓库，优先放私有配置或构建期注入，别把带隐私的 Data URI 永久留在公开前端包里。
点击上传、拖入或直接粘贴剪贴板截图均可；PNG、JPEG、GIF、WebP、BMP 等常见位图都支持。输出可切换 Data URI、纯 Base64、HTML img、CSS url()、Markdown 五种形态，HTML/Markdown 还能填 alt 文本。
Base64 用 4 个字符表示 3 字节，膨胀约 33%。页面会显示膨胀比例，原图约超 100KB 时警告——内联进 HTML/CSS 的图片无法被浏览器单独缓存，每次访问都会重复传输；大图请先压缩再编码，或改走独立 URL + 长缓存。
小 logo、icon、loading 首帧——省一次 HTTP 请求，首屏立刻可见；邮件模板——部分客户端对外链图片拦截严格，内联更稳（建议压到约 20–30KB）；接口载荷——小图直接放进 JSON 上报或配置，省掉图床依赖，此时常用纯 Base64 输出。
先缩到实际展示尺寸并压缩，再编码：先转 WebP/JPEG 再 Base64，往往比 PNG 原图直接编码小一个数量级。编码前可先走图片压缩工具；需要验证完整性时，把结果贴回 Base64 转图片工具还原看看。
同一个 Data URI 在样式表里重复出现多次会让 CSS 迅速膨胀——抽成一处自定义属性或背景工具类复用更干净。同一张图网页和邮件都要用时，分别按各自阈值压缩再编码，别共用一份过大的 Base64。
相关工具
相关文章
在线 Base64 转图片工具：将编码字符串还原为图片文件
学习如何将 Base64 编码字符串还原为图片文件。了解 Base64 解码原理、常见的 Base64 图片格式，以及在 Web 开发中的实际应用场景。
在线图片转 Base64 工具：将图片编码为文本字符串
学习如何将图片文件转换为 Base64 编码字符串。了解 Base64 编码的原理、应用场景，以及在前端开发中内联图片的方法。
Base64 与 Base64URL：padding、JWT 三段与 PEM 换行
标准 Base64 与 Base64URL 在码表与 padding 上不同。弄清 JWT 三段为何用 Base64URL、PEM 为何按 64 列换行，以及工具方言不一致时如何停止误诊。