← 返回功能
Free

图像 ↔ Base64

使用数据 URL 将图像内联到 CSS/HTML 中。

Base64 编码的图像可以直接嵌入到 CSS、HTML 或配置文件中 - 适用于小图标、电子邮件模板或构建工件,其中不需要外部图像请求。此工具使转换毫不费力。拖动图像文件、从剪贴板粘贴或单击浏览。该工具使用正确的 MIME 类型(data:image/png;base64,...、data:image/svg+xml;base64,...等)将其转换为 Data URI。相反的方向也适用 - 粘贴 Data URI,该工具会渲染图像以供预览,并提供下载链接以将其保存为真实文件。完全在浏览器中工作,无上传 - 您的图像永远不会离开您的计算机。支持 PNG、JPG/JPEG、SVG、WebP、GIF 和 ICO 格式。

实时预览
example.com
Image ↔ Base64 图片 → Base64 Base64 → 图片
拖入图片
拖入、粘贴或点击
PNG, JPG, SVG, WebP
logo.png
8.4 KB · 256×256
Base64 Data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADJJREFUeNrs0rERwCAIhFEwjv9/6OS...
复制 下载
核心功能

拖放、粘贴或浏览

多种图像加载方式:从操作系统拖动文件、从剪贴板粘贴(支持屏幕截图)或点击打开文件选择器。

实时图像预览

当您粘贴 Data URI 时,工具会立即渲染图像,以便您在复制或下载前进行验证。

一键复制 Data URI

复制完整的 data:image/...;base64,... 字符串,随时可以粘贴到 CSS、HTML src 属性或 JSON 配置中。

即时转换

无需等待上传 - 一切都在本地进行。即使大型图像也能瞬间转换。

下载为文件

从 Base64 Data URI 将解码后的图像以正确的扩展名保存为真实文件(PNG、JPG、SVG 等)。

支持所有常见格式

支持 PNG、JPG、SVG、WebP、GIF 和 ICO。自动检测 MIME 类型,确保您的 Data URI 始终正确。

使用场景

在 CSS 中嵌入小图标

将 16x16 图标转换为 Base64 并将其内联到 background-image: url(...)。无 HTTP 请求、无缓存未命中 - 图标与您的 CSS 一起提供。

电子邮件模板

当外部图像引用被客户端阻止或标记为垃圾邮件时,将图像直接嵌入 HTML 电子邮件中作为 Data URI。

构建工件和捆绑

在 webpack/vite 捆绑输出中包含小图像,以消除应用启动期间的资源往返。

从 Data URI 提取图像

从开发者工具、HTML 源或 CSS 文件中粘贴 Data URI,以预览和下载底层图像作为文件。

调试嵌入的图像

当嵌入的图像无法呈现时,将 Data URI 粘贴到解码器中,以验证 Base64 是否有效以及 MIME 类型是否正确。

使用方法
1

打开图像 <-> Base64

单击 DevSuite Pro 停靠栏中的图像 Base64 图标。将打开一个包含拖放区域和 Data URI 字段的两窗格面板。

2

加载图像

将文件拖到拖放区域、从剪贴板粘贴图像(Ctrl+V)或单击该区域浏览。会出现预览。

3

获取 Data URI

Base64 Data URI 会立即在输出字段中生成 - 单击复制将其发送到剪贴板,随时可以粘贴。

4

反向转换

要将 Base64 转换为图像,请将 Data URI 粘贴到字段中。预览会渲染图像并显示下载按钮。

5

下载或复制

将重建的图像保存为真实文件,或复制 Data URI 以在其他地方共享或嵌入。

准备好开始了吗?

免费安装 DevSuite Pro,为您的浏览器解锁 64+ 个开发者工具。

添加到 Chrome 添加到 Edge 添加到 Firefox