图像和Base64互转

📖 工具说明

1. 图片 Base64 有什么用？

Base64 把二进制图片编成纯文本，能直接写进代码里：

• 省一个请求： 小图标、小背景图内联进 CSS / HTML，不用再单独发一次 HTTP 请求，首屏少一次闪烁。
• 随文档走： 塞进 JSON、邮件源码、Markdown，图片跟着内容一起分发，不怕外链失效。
• 调试方便： 在 JS 里直接贴一段字符串就能显示图，不用起静态服务器。

代价是体积会大约 1/3，所以只适合小图（一般 < 10 KB）。

2. 功能

全部在浏览器本地完成，图片和文本都不上传。

图片 → Base64

• 拖拽 / 选择 / Ctrl+V 粘贴图片。
• 自动识别 MIME 类型，显示原文件体积、Base64 体积和膨胀百分比，超过 10 KB 会提醒。
• 一键复制四种形式：
  • Data URI —— data:image/png;base64,....
  • 纯 Base64 —— 只有编码本体
  • CSS —— background-image: url("...");
  • HTML —— <img src="..." alt="">

Base64 → 图片

• 粘贴 Data URI、纯 Base64，或从 CSS 里复制的 url(...)，工具会自动剥壳并按魔数补前缀。
• 显示识别到的类型、尺寸和解码后体积，即时预览。
• 一键下载还原出的图片文件。
• 解析失败会明确提示（多半是没复制全）。

3. 什么时候用 / 不用

4. 操作流程

编码： 拖入图片 → 看体积 → 点需要的那种"复制"。

解码： 把 Base64 或 Data URI 贴进下面的框 → 「还原图片」→ 预览 OK 就「下载图片」。

5. 说明

• Base64 是无损编码，转换前后像素完全一致，不影响画质。
• 处理在浏览器本地完成，不经过服务器。
• 浏览器对超长字符串（几 MB 的 data URI）解析会吃内存，大图请勿内联。

相关：图片压缩 · 图片工具箱 · Base64 编解码（文本） · 文件 ⇄ Base64 · ICO 转换 · 透明圆角图片。

请对你有权使用的图片做转换。

📖 相关推荐