关于图片 Base64 互转
图片与 Base64 互转是 Web 开发中常见的需求。把图片编码为 Base64 Data URL 后可以直接嵌入到 HTML、CSS、JavaScript 中,避免额外的 HTTP 请求,适合小图标、Logo、占位图等场景;反向把 Base64 字符串解码为图片则便于查看与还原原始图像内容。
在前端性能优化、移动端 H5 开发、邮件模板编写等场景中,开发者常需要把图片转为 Base64 内嵌以减少请求数;而在调试时,把代码或配置中的 Base64 字符串还原为图片则便于查看是否为预期的图像。手动编写转换代码既繁琐又易错,借助专门工具可以瞬间完成。
本图片与 Base64 互转工具支持图片转 Base64 Data URL、Base64 还原为图片预览,支持 PNG、JPEG、GIF、WebP、SVG 等主流图片格式。所有处理在浏览器本地完成,图片不会上传到任何服务器,可放心处理包含敏感信息的图片。
核心特性
图片转 Base64
上传图片自动编码为 Base64 Data URL,可一键复制用于 HTML、CSS 或 JavaScript 中。
Base64 还原图片
粘贴 Base64 字符串即可预览对应的图片,方便查看与下载还原。
多格式支持
支持 PNG、JPEG、GIF、WebP、SVG、BMP 等主流图片格式的相互转换。
实时预览
转换结果实时显示图片预览,所见即所得,便于核对结果。
本地处理零上传
所有图片与 Base64 转换在浏览器内完成,敏感图片不离开您的设备。
使用场景
内嵌小图标
把网站 Logo、小图标等小体积图片转为 Base64 Data URL,减少 HTTP 请求,提升首屏加载速度。
邮件模板图片
邮件客户端对外部图片限制严格,把图片转为 Base64 内嵌到 HTML 邮件中确保图片正常显示。
调试图片配置
把代码或配置中的 Base64 字符串还原为图片,查看是否为预期的图像内容。
数据传输
在不能直接传输二进制文件的通道中(如 JSON API、URL 参数),把图片转为 Base64 字符串传递。
常见问题
什么图片适合转 Base64?
小体积图片(建议小于 10KB)适合转 Base64 内嵌,如小图标、Logo、占位图。大图片转 Base64 后会显著增加 HTML / CSS 体积,反而降低性能,建议使用图片 CDN 或懒加载。
Base64 图片能减少 HTTP 请求吗?
能。把图片内嵌为 Base64 Data URL 后无需单独发起 HTTP 请求加载图片。但 Base64 编码后体积会增大约 33%,且无法被浏览器单独缓存,需要权衡使用。
支持哪些图片格式?
支持 PNG、JPEG、GIF、WebP、SVG、BMP 等主流图片格式。SVG 是矢量格式,转为 Base64 后可保持无损缩放。
Base64 Data URL 的前缀是什么?
Data URL 格式为 data:[MIME 类型];base64,<Base64 数据>,如 PNG 图片为 data:image/png;base64,iVBORw0KGgo...。前缀中的 MIME 类型告诉浏览器如何解析数据。