图片转 data URI（base64 或 URL 编码），解析任意 data URI，支持预览和下载，全部在浏览器完成。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
这个工具能做什么
一个专注于 data URI 全流程的工具：把 PNG、JPG、WebP、GIF、SVG 或 ICO 拖进来，立刻得到标准格式的 `data:image/...;base64,...` URI，可直接粘进 CSS、HTML 或 JavaScript，不走任何服务端。对于 SVG，可以切换成 URL 编 码输出（`data:image/svg+xml,...`），通常比 base64 小 20-30%，兼容性一样 好。切到「解析」模式，粘入任意 data URI，工具会把它拆开展示：媒体类 型、编码方式、数据字节数和有效性检验，适合审查 CSS bundle 或 HTML 邮件模板里嵌入的内联资源。粘入 base64 图片 data URI 还能直接预览图片 并下载原文件。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 20 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Base64 图片 Data URI 转换器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
用 URL 编码输出内联 SVG 图标，体积更小
你有一个 1.2 KB 的 SVG 图标需要内联进 CSS 文件。拖进编码器， 切换到 SVG 的「URL 编码」输出，复制紧凑的 `data:image/svg+xml,...` 字符串，通常比等效的 base64 形式小 15-25%。粘贴前体积统计就已经确认了节省效果。
审查 CSS bundle 里的内联 data URI
生产 CSS 文件里有一段可疑的内联图片。把原始的 `data:image/...` 字符串粘到解析模式，立刻看到 MIME 类型、编码方式和解码字节 数。有效性检验告诉你它是否格式正确或已损坏，全程不需要手动 解码。
从配置或模板里的 data URI 还原图片文件
同事把一段 `data:image/webp;base64,...` 塞进了 JSON 配置，你 要把真实文件取回来。把完整 URI 粘到解析模式，预览图片，点「下 载」就拿到一模一样的原始 WebP 字节，MIME 类型直接从 URI 前 缀读出来，不需要手动猜。
常见踩坑
内联超过 4-5 KB 的图片：data URI 会撑大 HTML/CSS、无法独立缓存、直接拖垮 Core Web Vitals；转换后的体积统计清楚地告诉你什么时候这是坏主意。
把裸 base64 字符串（没有 data:image/...;base64, 前缀）粘进 CSS background-image 或 HTML src，浏览器会静默忽略；始终使用完整的 data URI 形式。
SVG 坚持用 base64，而实际上 URL 编码能小 20-30% 且浏览器支持完全相同；先切换 SVG 编码模式对比大小，再决定。
隐私说明
所有文件读取、编码和解码都通过 FileReader 和标准 JavaScript 在浏览器 内完成，转换或解析时不发出任何网络请求，Network 面板请求数一直是 0。 你的图片数据既不写入 URL 也不发送到任何地方。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。