data:image/xxx;base64,... 的 Base64 编码 Data URL,让你无需外部图床即可将图片直接嵌入 HTML、CSS 或 JSON。png svg favicon 内嵌
本工具支持png svg favicon 内嵌。类似场景还包括 data uri base64 转图片下载 和 ico 转 data uri html link 标签,所有处理均在浏览器本地完成,无需上传文件。
svg 转 data uri css 背景
使用本工具可以轻松svg 转 data uri css 背景。此外,它也支持 ico 转 data uri html link 标签 等相关操作,结果即时显示,无需注册。
webp 转 base64 data uri 懒加载
webp 转 base64 data uri 懒加载是本工具的常见用途之一。同时它也支持 base64 图片编码 邮件 html 内嵌 和 小 logo png 转 base64 markdown,所有数据不离开您的浏览器。
gif 转 base64 邮件签名内嵌
需要gif 转 base64 邮件签名内嵌?直接在编辑器中粘贴内容即可。本工具同时支持 小 logo png 转 base64 markdown 等相关操作,完全免费。
jpg 转 base64 json api 请求体
jpg 转 base64 json api 请求体——所有计算和转换均在浏览器本地执行。相关功能还包括 data uri base64 转图片下载 和 ico 转 data uri html link 标签,无需上传或注册。
工具概述
图片 → Base64 可将本地图片(PNG、JPG、GIF、SVG、WEBP 等)转换为形如
如何使用本工具
第一步 — 点击拖放区打开文件选择器,或将图片直接拖放至此。第二步 — 工具会读取图片并转换为 Base64 Data URL;可以看到预览、文件名、原始大小以及 Base64 字符串长度。第三步 — 点击“复制 DataURL”将完整字符串放到剪贴板;粘贴到 CSS 的
background: url('...')、HTML 的 <img src="..."> 或 JSON 字段中。第四步 — 点击“清除”即可重置并上传另一张图片。常见使用场景
前端开发者通过将小图标(favicon、按钮图标)内联到 CSS 减少 HTTP 请求;在邮件模板中嵌入图片让收件人无需外部链接即可看到;将 SVG 转为 Data URL 作为 CSS 背景使用;在 Electron 应用或 Chrome 扩展中打包图片资源;在 Markdown 文档中内嵌图片避免路径依赖;作为 JSON 字段值发送图片到 API。
技术说明
转换使用浏览器原生
FileReader.readAsDataURL API。Base64 字符串大约是原文件的 4/3 大小(额外 33% 开销)。Data URL 会自动识别 MIME 类型(image/png、image/jpeg 等)。图片大小建议在 100 KB 左右以内 — 巨大的 Data URL 会撑大 HTML/CSS 并影响首屏性能。对于 SVG,URL 编码通常比 Base64 更小。隐私与安全
图片读取与编码全部在浏览器本地完成,不会上传,因此可安全用于包含敏感内容的截图、设计稿或产品图。