小资源需要快速内联
当图标、占位 SVG、追踪像素或文本片段足够小时，用 Data URI 生成器可直接嵌入页面。
免费开发者工具
Data URI 生成器 为 HTML 和 CSS 内联资源
免费的 Data URI 生成器，面向前端开发者。上传 PNG、JPEG、SVG、字体或粘贴文本，生成可用于 HTML img src、CSS background-image 和内联资源的 Base64 或 URL 编码 Data URI。
AD
Data URI 生成器解决的问题
Data URI 生成器帮助前端开发者快速内联小资源，不必反复查 MIME、编码格式和代码片段模板。
手写 MIME 容易出错
Data URI 生成器会识别常见类型，也允许你在复制生产片段前手动调整 MIME。
私有资源应留在本地
Data URI 生成器在浏览器中读取文件，未发布的图标和 UI 小资源无需上传服务器。
Data URI 生成器功能
Data URI 生成器把文件输入、文本输入、MIME 检测、编码选择、预览和复制输出放在一个本地流程里。
上传文件或粘贴文本
添加 PNG、JPEG、WebP、SVG、纯文本、JSON、CSS、WOFF、WOFF2 或其他小资源。
自动选择编码
Data URI 生成器会为 SVG 和文本优先使用 URL 编码，为图片、字体和二进制文件使用 Base64。
可编辑 MIME 类型
当浏览器无法提供可靠类型时，可以手动覆盖 MIME。
复制三种片段
复制普通 Data URI、CSS background-image 声明或 HTML img src 属性。
实时预览和统计
预览图片、SVG 和文本类输出，同时查看源大小与输出长度。
纯浏览器流程
在本地生成、预览和复制 Data URI，无需上传文件。
如何使用 Data URI 生成器
使用 Data URI 生成器，只需几个浏览器端步骤，就能把小资源变成 HTML 或 CSS 片段。
01
添加资源
粘贴文本或 SVG，或上传 PNG、JPEG、SVG、字体、文本文件。
- 仅本地处理，无需上传
02
检查 MIME 类型
确认 image/png、image/jpeg、image/svg+xml、text/plain、font/woff2 或其他 MIME。
- 仅本地处理，无需上传
03
选择 Data URI 生成器编码
多数资源使用自动模式，也可按项目需要强制 Base64 或 URL 编码。
- 仅本地处理，无需上传
04
复制代码片段
把普通 Data URI、CSS background-image 或 HTML img src 输出直接用于前端代码。
- 仅本地处理，无需上传
Data URI 生成器工作流
Data URI 生成器适合图标、SVG、文本片段和小型静态资源的日常前端工作流。
Data URI 生成器使用场景
当小资源应随 HTML 或 CSS 一起分发，而不是单独请求时，Data URI 生成器很有用。
内联 SVG 图标
把小 SVG 图标 URL 编码后粘贴到 CSS 或 HTML 中，无需单独资源文件。
单文件原型
把小图片或文本资源嵌入到需要单文件分享的 HTML 原型中。
邮件和文档示例
为示例、文档和可控的邮件实验准备小图片或 SVG Data URI。
Data URI 生成器常见问题
关于 Data URI 生成器编码、MIME 类型、浏览器使用和本地处理的常见问题。
Data URI 生成器会上传文件吗？
不会。文件通过浏览器 API 读取，Data URI 在本地生成。
什么时候用 Base64？
PNG、JPEG、WebP、字体和其他二进制资源适合使用 Base64。
什么时候 URL 编码更好？
SVG、CSS、JSON 和纯文本通常用 URL 编码更可读，也可能更紧凑。
Data URI 适合大文件吗？
通常不适合。Data URI 更适合小资源，因为大段内联字符串会膨胀 HTML 或 CSS，并降低缓存灵活性。
开始使用 Data URI 生成器
使用 Data URI 生成器上传或粘贴资源，选择 Base64 或 URL 编码输出，并复制用于 HTML 和 CSS 的 Data URI。
永久免费，纯浏览器 Data URI 生成器。