Data URI 生成器

将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

关键信息

分类
开发与 Web
输入类型
file, select, text
输出类型
text
样本覆盖
4
支持 API
Yes

概览

Data URI 生成器是一款便捷的在线工具，能够将图片、字体、音频、视频等各种格式的文件快速转换为 Data URI 格式（支持 Base64、URL 编码或原始文本）。通过将资源直接内联嵌入到 HTML、CSS 或 Markdown 中，您可以有效减少 HTTP 请求次数，优化网页加载性能。

适用场景

  • •需要在 HTML 或 CSS 中直接嵌入小图标或背景图片，以减少网页的 HTTP 请求数量时。
  • •在编写 Markdown 文档或单文件 HTML 页面时，需要内联嵌入图片或字体资源以保证文档的独立性。
  • •需要自定义 MIME 类型或将特定文本文件转换为 Base64 编码的 Data URL 格式时。

工作原理

  • •上传需要转换的本地文件（大小限制在 10MB 以内）。
  • •选择所需的编码方式（Base64、URL 编码或原始文本）以及输出格式（如仅 Data URI、HTML <img> 标签、CSS background 或 Markdown 嵌入）。
  • •系统自动检测或手动指定 MIME 类型，并即时生成对应的 Data URI 文本，供您一键复制使用。

使用场景

前端性能优化：将小型的 SVG 图标或 PNG 装饰图转换为 Base64 并内联到 CSS 中，避免首屏加载时产生过多的网络请求。
独立文档制作：在制作单 HTML 页面或导出 Markdown 报告时，将所有图片和字体打包进单个文件，方便离线分发。
邮件模板开发：在编写 HTML 邮件模板时，直接内联图片资源，确保邮件在不同客户端中都能正常显示而不会被拦截外部链接。

用户案例

1. 优化网页首屏加载速度

前端开发人员
背景原因
正在开发一个移动端活动页面，页面顶部有几个小图标，如果每个图标都单独发起 HTTP 请求，会影响首屏渲染速度。
解决问题
需要将这些小图标直接嵌入到 CSS 样式表中，减少网络请求。
如何使用
上传小图标 icon.png，在“输出格式”中选择“CSS background”，编码方式保持默认的“Base64”。
示例配置
编码方式: Base64, 输出格式: CSS background
效果
获得了一段可以直接复制到 CSS 文件中的 background-image 样式代码，成功将图标内联。

2. 在 Markdown 中嵌入本地示意图

技术文档工程师
背景原因
正在编写一份技术规范文档，需要插入一张架构图，但该文档需要以单个 .md 文件形式分发给客户，无法携带外部图片文件夹。
解决问题
需要将本地的 SVG 架构图直接嵌入到 Markdown 源码中。
如何使用
上传 architecture.svg，在“输出格式”中选择“Markdown 嵌入”。
示例配置
编码方式: Base64, 输出格式: Markdown 嵌入
效果
生成了类似 ![architecture](data:image/svg+xml;base64,...) 的 Markdown 语法代码，直接粘贴即可在支持的编辑器中正常预览图片。

用 Samples 测试

json, xml, html
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family image,pdf,text
image, pdf
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family audio,video,text
audio, video
二维码示例
用于测试二维码读取和生成工具的示例二维码图像
preferred input family image,text,json
image, text
XML 示例
XML（可扩展标记语言）格式示例，从简单到复杂结构
preferred input family image,text,xml
image, text

相关专题

音频编码与格式转换工具
在一个专题里比较音频格式转换、码率调整、采样率转换、编码切换和导出工具，适合交付与归档工作流。
图片格式转换与动画导出工具
在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
JSON 交换与格式翻译工具
在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
文本大小写、编码与规范化转换工具
在一个专题中比较文本大小写转换、全半角转换、编码转换、Quoted-Printable 处理和行内文本规范化工具。

常见问题

这个工具支持哪些文件格式？

支持图片（PNG, JPEG, SVG, WebP等）、音频、视频、字体（WOFF, WOFF2, TTF等）以及文本和 PDF 等几乎所有常见文件格式。

转换后的 Data URI 会增加文件体积吗？

使用 Base64 编码后，数据体积通常会比原始二进制文件增加约 33%，因此建议仅对较小的资源进行内联。

如何在 CSS 中使用生成的 Data URI？

在输出格式中选择“CSS background”，工具会自动生成类似于 background-image: url(data:image/png;base64,...) 的代码段。

我可以手动修改 MIME 类型吗？

可以。工具会自动检测文件类型，但您也可以在“MIME 类型”输入框中填写自定义的值进行覆盖。

转换过程是在服务器端还是客户端完成的？

转换过程完全在您的浏览器本地安全处理，文件不会被上传到任何外部服务器，保障您的数据隐私。

API 文档

请求端点

POST /zh/api/tools/data-uri-generator

请求参数

参数名 类型 必填 描述
file file (需要先上传) 是 -
encoding select 否 -
outputFormat select 否 -
customMime text 否 -

文件类型参数需要先通过 POST /upload/data-uri-generator 上传获取 filePath，然后将 filePath 传递给对应的文件字段。

响应格式

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
文本: 文本

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

支持 URL 文件链接或 Base64 编码作为文件参数。

如果遇见问题，请联系我们：[email protected]