图片转 Base64 — 在线 data URL
把图片变成 Base64 文本，或带 `data:image/...;base64,` 前缀的 data URL，方便嵌进 HTML、CSS、Markdown 或某些只收文本的配置。适合小图标与小图；大照片请优先普通文件链接，否则字符串又长又浪费。
拖放文件到此处，或点击选择
Base64 用一串可见字符表示二进制。浏览器里用 data URL 可以直接当图片地址，省一次额外请求——但体积大约比原文件大三分之一，且无法很好缓存。
因此它更适合：几 KB 的图标、像素画、小 Logo。把几兆照片编成 Base64 塞进 CSS，会让样式文件膨胀、首屏变慢。
编码前若图偏大，先压缩或改尺寸，字符串会短一截。
如何转换
- 选择图片并确认预览
- 按需开关 data URL 前缀
- 复制输出文本
- 粘贴到 HTML/CSS/配置中使用
什么时候需要图片 Base64
- 单文件演示页、邮件 HTML 想内嵌小图。
- CSS 里写微小背景图，不想多一个静态资源。
- 接口或配置只允许文本字段传图。
- 本页可选是否带 data URL 前缀，复制即用。
场景
- 把 16×16 图标嵌进组件库文档
- 邮件模板内嵌小徽标（注意体积）
- 把图传给只收 Base64 的表单字段
提示
- 写进 CSS `url()` 时请打开 data URL 前缀。
- 对方只要纯 Base64 时关掉前缀。
- 字符串过长就先压缩/改尺寸。
- 需要还原成文件时用 Base64 转图片。
输出形态
| 输入 | 输出 | 说明 |
|---|---|---|
| 小图标 PNG | data:image/png;base64,... | 带前缀 |
| 同一张图 | 纯 Base64 字符串 | 关前缀 |
图片转 Base64 常见问题
- 支持哪些图片？
- 浏览器能当作图片文件读入的常见格式均可，如 PNG、JPG、WebP、GIF 等。
- 为什么比原文件还「长」？
- Base64 会膨胀体积，这是编码方式决定的，不是出错。
- 能编文件夹里所有图吗？
- 本页一次处理一张，方便核对预览。
- 大图适合吗？
- 不建议。大图请托管为普通 URL，Base64 留给小资源。