# Data URI 生成器

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

> 标准页面: https://elysiatools.com/zh/tools/data-uri-generator

- **分类:** Development

- **关键词:** data uri, base64, 内联, 嵌入, 图片, 字体, css, html, data url

## 概述

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

## 输入项

- **文件** (file)
- **编码方式** (select)
- **输出格式** (select)
- **MIME 类型** (text): Auto-detected (e.g. image/png). Override only if needed.

## 适用场景

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

## 工作原理

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

## 使用案例

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

## 常见问题

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

支持图片（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 类型”输入框中填写自定义的值进行覆盖。

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

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

## 相关工具

- [图片序列转视频](https://elysiatools.com/zh/tools/image-sequence-to-video): 将上传的图片文件或 ZIP 帧压缩包转换为视频，并按文件名自然排序
- [PDF摄影接触表](https://elysiatools.com/zh/tools/pdf-photo-contact-sheet): 按网格生成缩略图接触表，并附带文件名与EXIF信息
- [PDF分镜脚本纸](https://elysiatools.com/zh/tools/pdf-storyboard-sheet): 生成带缩略图和描述区域的分镜脚本纸
- [图片透明度水印工具](https://elysiatools.com/zh/tools/image-watermark-opacity): 为图片添加具有自定义透明度的水印，支持文字和图片水印，具有高级透明度控制功能
- [批量图片转换](https://elysiatools.com/zh/tools/batch-convert): 批量转换多张图片到不同格式，支持质量设置
- [图片位深转 PNG 转换器](https://elysiatools.com/zh/tools/image-to-bit-depth-png): 将图片转换为精确的黑白、索引色、灰度、RGB 或 RGBA PNG 位深，并验证输出。
- [PDF页眉页脚片段](https://elysiatools.com/zh/tools/pdf-header-footer-snippets): 将HTML转换为PDF，并插入Logo/标题/日期等页眉页脚片段
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶

## 示例

- [Web TypeScript 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-typescript): Web TypeScript 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换
- [PDF示例](https://elysiatools.com/zh/samples/pdf-samples): 2026-02-01 到 2026-02-10 工具生成的PDF示例
- [WebRTC 实时通信示例](https://elysiatools.com/zh/samples/webrtc-samples): 全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现

## 相关内容

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