DEVELOP.07 BASE64 IMAGE

Base64 图片转换

直接编辑或粘贴 Base64 编码并实时预览；上传图片会替换编辑区内容，所有处理都在浏览器本地完成。

SOURCE

上传图片

拖拽图片到这里

或点击选择 JPG、PNG、GIF、WebP、SVG、BMP、ICO

最大 10 MB · 文件只在当前浏览器内读取

选择图片后立即编码并预览

BASE64

Base64 编码

等待图片或 Base64 编码FileReader 与 Data URI 本地处理 · 不上传 · 不保存

§ 01

编码与解码共用一套直觉操作

放入内容

直接粘贴或编辑 Data URI 与纯 Base64；也可以拖入图片，用生成的 Data URI 替换当前内容。

检查预览

右侧始终解析编辑框里的内容，并自动清理空白、修复填充、识别常见图片类型。

复制或下载

确认预览、尺寸和体积后复制当前编码，或将预览结果下载为图片。

§ 02

Base64 只改变表示方式，不改变图片像素

Base64 把图片二进制按 6 bit 分组映射为可打印字符，因此可以放入 JSON、HTML 或 CSS 文本。它是编码而不是压缩，往返转换不会降低画质。

代价是体积通常增加约三分之一。小图标内联可以减少请求，大图放进页面则会增大文档、失去独立缓存，并可能拖慢首屏。

§ 03

两种方向覆盖的输入与用途

方向

输入

适合场景

图片转 Base64

JPG、PNG、GIF、WebP、SVG、BMP、ICO

网页内联、API JSON、单文件报告

Base64 转图片

Data URI 或纯 Base64

查看接口结果、恢复资源、排查 MIME 类型

§ 04

Data URI 应该用在小而稳定的资源上

Data URI 把 MIME 类型和 Base64 数据组合成一个可以直接引用的地址。完整 Data URI 适合图片属性，纯 Base64 更适合已有独立 MIME 字段的 API，HTML 与 CSS 输出则减少手工拼接。

经验上优先内联几 KB 的图标或装饰资源。经常复用、需要独立缓存或体积较大的图片更适合普通 URL。邮件客户端对 Data URI 的支持也不完全一致，发送前应在目标客户端测试。

§ 05

在代码中进行图片 Base64 转换

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

常见问题

Q1纯 Base64 没有 Data URI 前缀也能预览吗？

可以。工具会根据常见文件头识别 PNG、JPEG、GIF、WebP 与 SVG；无法识别时使用你选择的默认 MIME 类型。

Q2为什么编码后体积变大？

Base64 用四个文本字符表示三个原始字节，因此主体通常增加约三分之一，完整 Data URI 还会加上少量前缀。

Q3图片转 Base64 会损失画质吗？

不会。本工具读取原始文件字节并改变表示方式，没有重采样或压缩。解码得到的字节与原图一致。

Q4页面会上传图片或保存编码吗？

不会。文件读取、校验、预览和下载都在当前浏览器页面完成，也不会写入浏览器存储。

Q5为什么一段 Base64 无法显示？

常见原因是内容被截断、混入非 Base64 字符、声明的 MIME 类型与实际文件不符，或数据本身不是浏览器支持的图片。