点击或拖拽上传图片
支持 JPG、JPEG、PNG、GIF、BMP、WebP、AVIF、SVG 格式，单张最大 50MB
输出设置
为什么选择易工具的图片Base64互转器？
毫秒级实时转换
上传图片后即时输出Base64编码，无需等待服务器响应，本地Canvas渲染速度提升10倍。
本地处理不上传
所有转换均在浏览器完成，图片文件不会离开您的设备，敏感文件和商业素材100%安全。
多格式一键复制
提供纯Base64、HTML img标签、CSS background、Markdown四种代码格式，直接复制粘贴即用。
全格式图片支持
涵盖JPEG、PNG(含透明)、GIF、WebP、BMP、AVIF、SVG、HEIC等主流格式，单文件最大50MB。
可视化信息面板
显示原图尺寸、原始大小、编码后大小、体积膨胀率等关键参数，助您决策是否内嵌。
全端设备适配
完美适配Windows、macOS、Linux桌面系统，iOS/Android移动端以及平板电脑，响应式设计。
使用步骤详解
选择或拖拽图片
点击上传区域打开文件浏览器，或直接将本地图片拖拽到虚线框内。可处理最大50MB的单张图片。
调整输出参数（可选）
根据需求选择输出格式（保持原格式/JPG/PNG/WebP），调节压缩质量。建议WebP格式在同等画质下体积最小。
选择代码格式
根据使用场景选择：纯Base64字符串、HTML img标签（网页嵌入）、CSS background（样式表）、Markdown（文档/笔记）。
复制或下载结果
点击「一键复制代码」直接粘贴到项目中，或下载为txt文件备份。反向操作：粘贴Base64可立即还原图片并下载。
什么是Base64图片编码？科普详解
Base64 编码原理
Base64是一种基于64个可打印ASCII字符（A-Z、a-z、0-9、+、/）来表示任意二进制数据的编码方案。编码时将每3字节（24位）二进制数据拆分为4组6位，每组对应一个Base64字符，不足3字节时用=号填充。例如：将PNG图片的二进制像素数据转换为纯文本字符串，即可直接嵌入HTML、CSS、JSON、XML等文本格式中，无需单独的图片文件。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVduwg...
Base64 图片的应用场景
- CSS小图标内嵌：网站小于8KB的小图标、按钮背景图直接写入CSS文件，减少HTTP请求数，提升首屏渲染速度。
- HTML邮件嵌入图片：邮件客户端通常屏蔽外链图片，使用Base64内嵌可确保图片直接显示无需用户手动下载。
- 单文件HTML分发：制作离线HTML报告、电子书、演示文稿时将所有图片内嵌，打包为单个文件便于传输分享。
- 前端本地存储：在localStorage、IndexedDB、Web SQL中缓存图片数据，实现离线可用的PWA应用。
- JSON/API传输图片：移动端与服务器通信、微服务调用时避免文件上传协议，直接将小图Base64放入JSON字段。
- Canvas导出图片：前端Canvas绘制的二维码、海报、图表导出时toDataURL()方法本身就返回Base64字符串。
常见错误与正确做法说明
将几百KB甚至几MB的大图转为Base64写入HTML/CSS，不仅文件膨胀33%，还阻塞HTML/CSS解析，首屏白屏时间大幅增加。
✅ 正确：仅对 ≤10KB 的图标使用内嵌；大图使用CDN独立URL + 懒加载。
直接粘贴纯Base64字符串到img src，浏览器无法识别格式导致图片裂开。
✅ 正确：使用标准格式 data:image/jpeg;base64,{编码}，或勾选本工具「包含Data URI前缀」选项。
照片类JPG图片强行转PNG输出，不仅体积成倍增加，画质也无任何提升。
✅ 正确：照片选JPG/WebP；图标/截图带透明选PNG；需要最高压缩率选WebP。
为美化代码在Base64中间插入换行或空格，部分老旧浏览器解析失败。
✅ 正确：保持Base64为连续单行；CSS中如需换行请用反斜杠\转义换行符。
常见问题 FAQ
Q1：图片转Base64编码后体积会变大多少？
Base64编码将每3字节二进制数据转为4个ASCII字符，因此编码后数据体积约增加33.3%。例如：100KB图片编码后约为133KB，1MB图片编码后约为1.33MB。建议仅对小于10KB的小图标和缩略图使用Base64内嵌方式，大图片仍使用独立URL地址配合浏览器缓存更佳。
Q2：使用本工具上传的图片会被保存到服务器吗？隐私安全吗？
绝对安全，不会上传。本工具完全基于HTML5标准的FileReader API和Canvas API实现，所有文件读取、编码转换、图片解码操作均在您的浏览器本地沙箱中完成，图片文件的二进制数据不会产生任何网络上传请求。您可以在浏览器开发者工具→网络面板中验证：转换过程中全程无XHR/Fetch请求。商业机密图片、个人照片、含敏感信息的截图均可放心使用。
Q3：HTML中使用Base64内嵌图片有什么优缺点？
✅ 优点：（1）减少HTTP请求次数，加快小图标加载速度；（2）避免图片路径失效、跨域、防盗链问题；（3）便于打包单文件HTML/CSS分发和离线查看；（4）邮件中可直接显示无需下载附件。
❌ 缺点：（1）体积增大33%，浪费带宽和流量；（2）无法利用浏览器图片缓存（每次修改CSS/HTML需重新下载）；（3）增大CSS/HTML文件体积，阻塞页面关键渲染路径；（4）IE8以下旧浏览器不支持；（5）代码可读性差，源文件臃肿。
最佳实践：单张图片 ≤ 8KB 且该页面全站复用 → 用Base64内嵌；否则使用独立图片URL + CDN加速。
Q4：Base64编码图片支持哪些浏览器？最大尺寸限制是多少？
✅ 浏览器兼容：Chrome 4+、Firefox 3.6+、Safari 5+、Edge全版本、Opera 11.5+；IE 8支持最大32KB Base64，IE 9+无限制。移动端iOS Safari 4.2+、Android 2.3+全支持。
📐 实际尺寸限制：浏览器本身无硬性限制，但建议单张Base64内嵌图片不超过200KB，否则严重拖慢页面加载速度。超过1MB的图片使用独立URL是更稳妥的方案。
Q5：Base64转图片失败、显示裂开或乱码怎么办？
按照以下顺序排查90%以上的问题：
1️⃣ 检查空白字符：将Base64中的换行、空格、制表符全部删除，只保留连续的A-Za-z0-9+/=字符。部分网站复制代码时会自动插入换行符。
2️⃣ 检查前缀完整性：确保格式为 data:image/正确格式;base64,。常见错误：png写成jpg导致png图片解码失败。
3️⃣ 检查字符遗漏：Base64字符数必须是4的倍数，结尾0-2个=号填充。末尾少1个字符会导致整张图片无法解码。
4️⃣ 检查来源完整性：确认Base64来源是完整的图片文件，非仅部分片段。可先用本工具反向解码再重新编码比对。