图片转Base64

图片转Base64工具说明

本工具基于浏览器内置的 FileReader API 在本地将图片编码为 Base64 字符串。Base64 是一种用 64 个可打印字符(A-Z、a-z、0-9、+、/)表示二进制数据的编码方式,常用于把图片内联嵌入 HTML、CSS、JSON 中,从而减少 HTTP 请求。工具支持纯 Base64、Data URL、CSS background-image、HTML img 标签四种输出格式,所有处理在本地完成,图片不会上传到任何服务器,保障隐私安全。

为什么需要图片转Base64

• 内联小图标:将小图标、背景图编码为 Data URL 直接嵌入 CSS/HTML,减少 HTTP 请求,加快首屏加载
• 数据传输:在 JSON、XML 等纯文本协议中携带图片数据,无需额外的二进制文件传输
• 邮件嵌入:在 HTML 邮件中内联图片,避免外链图片被邮件客户端拦截
• 本地存储:把图片数据存入 localStorage 或 IndexedDB,实现离线缓存

输出格式说明

• 纯 Base64:仅包含 Base64 编码字符串,不含任何前缀,适合自行拼接使用
• Data URL:包含 MIME 类型前缀(data:image/png;base64,...),可直接用于 img 标签的 src
• CSS background:格式为 background-image:url(data:...),可直接写入样式表
• HTML img src:完整的 img 标签,可直接复制粘贴到页面代码中

使用技巧

• Base64 编码会使数据体积增加约 33%,建议仅对小于 10KB 的小图标、背景图进行编码
• 大图片使用 Base64 会显著增大 HTML/CSS 文件体积,反而降低加载性能,应继续使用普通图片链接
• 编码结果可一键复制到剪贴板,或下载为 txt 文本文件保存

常见问题

Base64编码后的图片能直接在网页中使用吗？

可以。Data URL 格式的 Base64 图片可以直接用在 img 标签的 src 属性或 CSS 的 background-image 中,浏览器会自动解码并显示图片,无需额外的 HTTP 请求。

为什么Base64编码后体积会变大？

Base64 编码将每 3 个字节的二进制数据转换为 4 个字符,因此编码后的数据会比原始数据大约 33%。这是 Base64 编码的固有特性,无法避免,所以不建议对大图片进行编码。

图片会被上传到服务器吗？

不会。所有图片处理都在您的浏览器本地完成,使用 FileReader API 进行编码,图片数据完全不会离开您的设备,100% 保护隐私安全。

支持哪些图片格式？

支持所有浏览器能识别的图片格式,包括 JPG/JPEG、PNG、GIF、WebP、SVG、BMP、ICO 等常见格式。

Data URL 和纯 Base64 有什么区别？

纯 Base64 只是编码字符串本身;Data URL 在前面加上了 data:image/类型;base64, 的前缀,声明了数据的 MIME 类型,可被浏览器直接识别并渲染。需要直接显示图片时请使用 Data URL。

如何把 Base64 字符串还原成图片？

把完整的 Data URL 填入浏览器地址栏或 img 标签 src 即可查看;若只有纯 Base64,需先补上 data:image/png;base64, 前缀。也可使用专门的 Base64 解码工具将字符串还原为二进制文件。