图片 ⇄ Base64 互转，拖拽 PNG/JPG/WebP/SVG，得 data URI 用于 CSS / HTML / Markdown。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
这个工具能做什么
纯浏览器运行的图片 ⇄ Base64 双向转换器。把 PNG / JPG / WebP / GIF / SVG / ICO 拖进来，立刻得到裸 Base64、完整 `data:image/...;base64,...` URI，以及三种一键包装：CSS `background-image`、HTML `<img>` 标签、Markdown ``， 复制到样式表、模板、README 里直接能用。反向粘贴 Base64 字符 串或 data URI，自动解码出预览图并附带"下载"按钮，可把原文件 取回。每个结果旁边都显示原始大小、编码后大小、典型 +33% 体 积增幅，让你看一眼就知道这张图值不值得 inline。无上传、无 服务端、无配额：FileReader + Blob 全在本地完成，含 `<style>` 的 SVG 与动图 GIF 也照常工作。
工具细节
- 输入
- 文件 + 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 16 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Base64 图片转换器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把 2 KB 导航 logo 内联掉，干掉一个阻塞首屏的请求
页头 logo 是个 2.1 KB 的 PNG，每次冷访问都要单发一个请求才 能画出来。拖进来，复制 CSS `background-image` 片段贴进样式 表，logo 就随已加载的 CSS 一起到货，每次冷访问省掉一次往 返。旁边的编码大小显示它涨到约 2.8 KB，仍在 4 KB 内联门槛 以下，这单内联划算。
把图标嵌进单文件 HTML 邮件模板
你在做一封要在 Outlook 和 Gmail 里都能渲染、又不准外链图床 的事务邮件。把 24×24 的状态图标编码出来，拿到 `<img src="data:image/png;base64,...">` 标签直接贴进模板。图 片转发和离线阅读都不掉，因为根本不发请求；旁边 33% 增幅的 显示让你提前知道最终字节成本。
从配置里的 Base64 串还原出原文件
同事把一段 `data:image/webp;base64,...` 塞进了 JSON 配置，你 要把真实文件取回来。整段 URI 粘到解码侧，预览图渲染出来， 点「下载」就拿到一模一样的原始 WebP，字节级一致。不用自己 猜 MIME 类型，工具直接从 URI 前缀读出来。
把含样式的 SVG 图标塞进 README 且样式不丢
你想在 GitHub README 里放个保留渐变和内嵌 `<style>` 的小状态 徽章。把 SVG 编码出来，复制 Markdown `` 一 行贴进去。因为 SVG 是按裸字节处理的，渐变、滤镜、`<defs>` 全都保得住，不会被压平或剥掉。
常见踩坑
为了「省一个请求」把 200 KB 的主视觉图内联进去，结果 HTML 凭空胖了约 267 KB、LCP 被拖垮；几 KB 以上的图老老实实用普通 URL 托管。
把不带 `data:image/png;base64,` 前缀的裸 Base64 串塞进 `<img src>`，浏览器只显示一张裂图；要贴就贴完整 data URI，也就是第二个输出框那个，不是第一个。
明明 `data:image/svg+xml,...`（URL 编码、不走 Base64）通常小 20-30% 且一样能用于 `background-image`，却硬把 SVG 走 Base64；只有当某个工具不收纯文本形式时才退回 Base64。
隐私说明
你拖进来或粘进来的每张图，都用 `FileReader` 在你的浏览器标签页里 读取并完成转换。没有任何上传：打开 DevTools 的 Network 面板，编码 或解码时请求数一直是 0。你的输入也不会写进 URL，所以分享出去的链 接里既没有图片数据也没有 Base64 串。页面缓存之后，整个工具离线也 能用。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。