什么是 数据URL？
数据URL是一种 URI 方案，允许将小型数据项内联嵌入到网页文档中，就像它们是外部资源一样，使用 Base64 编码将二进制数据直接表示在 URL 字符串中。
快速了解
| 全称 | Data URL (数据 URI 方案) |
|---|---|
| 创建时间 | 2026-02-01 |
| 规范文档 | 官方规范 |
工作原理
Data URL，也称为 Data URI，提供了一种在网页中内联包含数据的方式，就像它们是外部资源一样。该方案遵循 'data:[<mediatype>][;base64],<data>' 格式，其中 mediatype 指定 MIME 类型，data 部分包含实际内容。对于图像等二进制数据，使用 Base64 编码将二进制内容转换为 ASCII 字符。Data URL 消除了单独的 HTTP 请求需求，减少了小型资源的延迟，但由于 Base64 编码开销（大约比二进制大 33%），会增加文档大小。
主要特点
- 格式：data:[<mediatype>][;base64],<data>
- 消除额外的 HTTP 请求
- Base64 编码增加约 33% 的大小
- 所有现代浏览器都支持
- 无法与包含文档分开缓存
- 最大长度因浏览器而异（通常 2MB 以上）
- 适用于小型图像、字体和 CSS 背景
常见用途
- 在 CSS 或 HTML 中嵌入小型图像
- 在样式表中内联 SVG 图标
- 单文件 HTML 文档
- 带有嵌入图像的电子邮件 HTML 模板
- 减少 HTTP 请求以提高性能
示例
Loading code...常见问题
使用 Data URL 有什么优缺点？
优点：减少 HTTP 请求（改善小型资源的初始加载）、支持单文件 HTML 文档、加载后可离线使用。缺点：由于 Base64 编码，文件大小增加约 33%；无法与包含文档分开缓存；不适合大文件；内容被编码后调试更困难。
Data URL 的最大大小限制是多少？
没有官方标准限制，但实际限制因浏览器而异。现代浏览器通常支持 2MB 或更大的 Data URL。但出于性能考虑，建议仅对小型资源（10KB 以下）使用 Data URL，因为较大的文件从单独缓存中获益更多。
什么时候应该使用 Data URL 而不是普通 URL？
适合使用 Data URL 的场景：小型图像（10KB 以下的图标、logo）、小型 CSS 背景、单文件 HTML 文档、电子邮件 HTML 模板。不适合的场景：大型图像、频繁变化的资源、多页面共享的资源（缓存更有效）、SEO 重要的场景。
如何从图像文件创建 Data URL？
可以通过以下方式创建 Data URL：1）在线转换器（图像转 Base64 工具）；2）命令行：base64 -i image.png | xargs -I {} echo 'data:image/png;base64,{}'；3）JavaScript：FileReader.readAsDataURL() 或 canvas.toDataURL()；4）构建工具如 webpack 的 url-loader 自动转换。
Data URL 可以用于所有文件类型吗？
是的，Data URL 可以通过指定适当的 MIME 类型来编码任何文件类型。常见用途包括图像（image/png、image/jpeg、image/svg+xml）、字体（font/woff2）、音频（audio/mp3），甚至 JavaScript 或 CSS。但出于安全原因，某些上下文可能会限制特定的 MIME 类型。