工具信任状态
此工具的输入和输出会在当前浏览器中处理。
- 浏览器本地此工具的输入和输出会在当前浏览器中处理。
- 离线能力应用加载后,核心处理无需网络也可运行。
- 常规输入此工具未标记为敏感输入工具。
- 开发者工具检查使用工具时打开 Network 面板以验证请求。
喜欢这个工具?
安装 byteflow.tools 可更快启动,并离线访问浏览器本地工具。外部请求工具在执行查询操作时仍需要网络。
安装指南工具信任状态
此工具的输入和输出会在当前浏览器中处理。
喜欢这个工具?
安装 byteflow.tools 可更快启动,并离线访问浏览器本地工具。外部请求工具在执行查询操作时仍需要网络。
安装指南在图片和 Base64 数据 URI 之间进行转换。
将图片拖放到此处或点击浏览
支持 PNG、JPG、SVG、WebP
将图像转换为 Base64 格式并将 Base64 图像有效负载解码回预览,以进行集成、嵌入和调试工作流程。
它将上传的图像编码为 Base64,并可输出数据 URI。
它可以将原始 Base64 或数据 URI 图像字符串解码为实时预览。
它支持多种输出格式,包括 HTML、CSS、超链接和网站图标片段。
它跟踪输出大小并提供每种格式的一键复制操作。
编码源
logo.svg 或 screenshot.png 上传文件
解码源
data:image/png;base64,iVBORw0...
原始负载
iVBORw0KGgoAAAANSUhEUg...
数据 URI
data:image/png;base64,...
HTML 输出
<img src="data:image/png;base64,..." alt="" />
CSS 输出
.image { background-image: url("data:image/png;base64,..."); }数据 URI 格式无效
确保负载与 `data:<mime>;base64,<content>` 结构匹配。
解码预览失败
删除空格并验证 Base64 字符是否完好。
输出中出现意外的 MIME 类型
确认源文件类型和 URI 头部值。
非常大的有效负载会影响性能
对大型资源使用文件托管,而不是内联 Base64。
复制的片段中断 HTML/CSS
转义引号并验证上下文特定的语法。
如需了解统一的隐私术语、本地处理模式、外部请求标记和 DevTools 验证流程,请查看信任中心。
图片 ↔ Base64 应作为交付流程中的快速校验步骤,在提交、发布和交接前都建议执行一次。
我可以解码数据 URI 和原始 Base64 吗?
是,支持两种输入格式。
我应该选择哪种输出格式?
使用与您的目标集成上下文相匹配的格式。
Base64 适合大图像吗?
通常不,大图像更适合作为文件使用。
这可以生成图标标签吗?
是的,包括图标链接输出。
为什么 Base64 输出比原始文件大?
Base64 编码通过设计增加有效负载大小。