图片转 Base64

功能简介

这个工具把图片转换成 Base64 文本和可以直接粘贴使用的 Data URI。Data URI 能把图片直接嵌入 HTML、CSS、Markdown、JSON 或邮件里，页面少一次 HTTP 请求，代码片段也不用另外托管图片文件。它也能反向使用：粘贴 Base64 或 Data URI，就能预览并下载图片。

使用方法

1. 把图片拖到上传区域，或点「选择图片」，也可以点「示例」载入一个 SVG 图标。
2. 预览区会显示图片，以及类型、文件大小、Base64 大小和尺寸。
3. 选择「输出格式」：
   • Data URI：data:image/png;base64,…，用于 src 属性和 JSON。
   • 纯 Base64：只有编码字符串，可选每 76 个字符换行（MIME、PEM 风格）。
   • CSS 背景：完整的 background-image: url("…"); 声明。
   • HTML <img>：以 Data URI 为 src 的图片标签。
   • Markdown：![image](data:…)。
4. 复制结果。如果要解码，把 Base64 或 Data URI 粘贴到输入框，再点「下载图片」。

示例

一个 2×1 像素的 PNG 转换后是：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

在 CSS 里使用：

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

什么时候适合内嵌图片

内嵌适合体积小、使用频繁的图片，比如图标、小背景图、加载动画和邮件签名。照片和大图不适合：Base64 会让体积增加约三分之一，图片不能脱离页面或样式表单独缓存，还会拖慢整个文件的解析。经验上，内嵌的图片最好控制在几 KB 以内。对 SVG 来说，百分号编码的 Data URI（data:image/svg+xml,…）通常比 Base64 更小，本工具两种都能识别。