文件转 Base64

将图片或任意文件转换为 Base64 Data URL，一键生成 img / link / CSS background 代码片段

文件转 Base64

选择或拖拽文件，自动生成 Base64 编码与多种使用代码

点击此处选择文件，或将文件拖拽到此处

建议文件大小 < 5MB，避免浏览器卡顿

广告位

使用说明

  1. 点击上传区域或拖拽文件到上传区，支持图片、字体、SVG、文本等任意文件
  2. 工具会自动读取文件并生成 Base64 Data URL（建议文件小于 5MB 避免卡顿）
  3. 在 Tab 切换中查看：完整 Data URL / <img> 标签 / <link> 标签 / CSS background 代码
  4. 点击"复制代码"按钮将当前 Tab 内容复制到剪贴板
  5. 点击"移除"按钮清除当前文件，可重新选择新文件
  6. 图片类型可直接在浏览器中预览，无需上传到服务器

适用场景

  • 内联图片：将小图标、Logo 转为 Base64 减少 HTTP 请求
  • 邮件模板：邮件中嵌入图片避免外链被拦截
  • SVG 字体：将 SVG / 字体文件内联到 CSS 中
  • 数据传输：将二进制文件转为字符串便于 API 传输
  • 演示原型：单文件 HTML 中嵌入资源，便于分享

安全保障

  • 本地处理：文件读取与编码全部在浏览器本地完成
  • 隐私保护：不上传文件到任何服务器，不存储数据
  • 无网络请求：编码过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

为什么建议文件小于 5MB？

Base64 编码后体积会增大约 33%，大文件生成超长字符串会导致浏览器内存占用过高、文本框渲染卡顿甚至崩溃。建议小图标、小图片使用 Base64，大文件仍使用 URL 引用。

Base64 会增加页面加载速度吗？

对小于 4KB 的小图标，使用 Base64 内联可以减少 HTTP 请求数，提升首屏加载。但对大文件，Base64 会增大 HTML/CSS 体积，且无法利用浏览器缓存，反而会拖慢加载。建议权衡使用。

支持哪些文件类型？

支持任意文件类型：图片（PNG/JPEG/GIF/WebP/SVG）、字体（WOFF/TTF/OTF）、文档、二进制文件等。生成的 Data URL 会根据 MIME 类型自动设置正确的 content-type 前缀。

Data URL 与纯 Base64 字符串有何区别？

Data URL 是完整的可引用格式（data:[mime];base64,XXXX），可直接作为 src/href 使用；纯 Base64 字符串只是编码结果，需要手动拼接前缀。本工具默认生成 Data URL，方便直接复制使用。