什么是 Data URL？
Data URL（数据统一资源定位符）是一种特殊的 URL 协议，它允许开发者将小型文件直接嵌入到
HTML 或 CSS 中，而不是通过外部链接加载。它的格式通常以
data:
开头，后跟 MIME 类型、Base64 编码标识以及实际的数据字符串。
例如：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
一、Data URL 的优势
- 减少 HTTP 请求： 每一个外部资源（如图片、图标）都会触发一次 HTTP 请求。将小图片转为 Data URL 嵌入，可以显著减少请求次数，提升网页加载性能。
- 离线可用： 资源直接存储在代码中，不依赖外部文件路径，适合离线网页或邮件模板。
- 规避跨域限制： 由于资源已在本地文档中，不会受到 CORS（跨源资源共享）政策的影响。
二、Data URL 的劣势与限制
- 体积膨胀： Base64 编码后的体积通常比原始二进制文件大 33% 左右。因此，不建议对大型文件（如高清照片、长视频）使用 Data URL。
- 缓存失效： 嵌入到 HTML 中的 Data URL 无法像独立文件那样被浏览器单独缓存。每次 HTML 更新，嵌入的资源都会重新加载。
- 解析开销： 浏览器在渲染时需要解码 Base64 字符串，对于低性能设备，过多的 Data URL 可能会导致页面卡顿。
三、常见应用场景
-
CSS 背景图：
在 CSS 文件中直接嵌入小图标或背景模式。
background-image: url("data:image/svg+xml;base64,..."); - Markdown 图片嵌入： 在单个 Markdown 文档中保存图片，无需担心图床失效。
- HTML img 标签： 临时预览上传的图片或在脚本中动态生成资源。
四、如何选择输出格式？
本工具支持多种输出格式，以满足不同的开发需求：
- Data URL: 标准格式，适用于大多数 HTML 和 JS 场景。
-
CSS:
自动包装为
url()函数，方便直接复制到样式表。 - Markdown: 生成图片语法，方便在笔记或 GitHub 文档中使用。