在线 Base64 图片编码工具，支持 PNG、JPG、GIF、SVG 等图片格式转 Base64
点击选择图片 或 拖拽图片到此处
支持 PNG / JPG / WebP / GIF
使用场景
前端开发最常用的场景就是图片转 Base64 嵌入页面。比方说你在写一个登录页面，Logo 图标很小只有几百字节，但每次加载都要发一次 HTTP 请求。把它转成 Base64 直接塞进 CSS 或者 HTML 里，浏览器渲染页面的时候图片数据就已经在了，不需要额外加载。特别适合图标、小插图、loading 动画这些小文件。
做邮件模板的时候也必用。很多邮件客户端（比如 Outlook）不支持外部图片链接，必须把图片以 Base64 的方式直接嵌入 HTML。你需要把 Logo、按钮背景这些图片转成 Base64，然后内联到邮件 HTML 代码里。用这个工具拖放图片就能拿到 Base64 字符串，效率比手动转高多了。
React Native 或小程序开发者也会用到。有些场景需要从本地读取图片编码后上传，或者把图片数据存到本地存储里。开发阶段用这个工具快速拿到图片的 Base64 数据，方便做功能验证和原型设计。
常见问题
问：图片转 Base64 后应该放在 CSS 里还是 HTML 里？ 答：如果图片是页面装修用的（背景图、图标），建议放在 CSS 的 background-image 的 url() 里。如果图片是内容的一部分（用户头像、产品图），放在 HTML 的 img 标签的 src 属性里更合适。
问：支持批量多张图片转 Base64 吗？ 答：目前一次只能处理一张图片。如果你需要批量处理，建议先用 Photoshop 或其他批处理工具把所有图片准备好，再一张一张转。不过大多数场景下只需要处理几张关键图片，很少需要批量。
问：GIF 动图转 Base64 后还能保持动画效果吗？ 答：可以的。Base64 只是编码方式，不改变图片本身的内容。GIF 转 Base64 后嵌入页面，动画效果完全不受影响。但要注意 GIF 文件通常比较大，转 Base64 后嵌入页面会让 HTML 文件体积明显增加。
相关工具推荐
- Base64 编码/解码工具 - 通用文本和文件的 Base64 转换
- 占位图生成器 - 快速生成开发用的占位图片
- SVG 编辑器 - 编写和编辑 SVG 矢量图，可直接嵌入页面