无需登录 数据私有 本地保存

Data URI生成器 - 文件/文本转内联URI

14
0
0
0

Data URI 生成器

将文件或文本转换为内联 Data URI，支持 Base64 编码，轻松嵌入网页资源

拖拽文件到此处

或点击选择文件

支持所有文件类型 · 推荐小于 1MB 的文件

生成结果
等待输入内容...
常见问题 & 知识点

Data URI（统一资源标识符）是一种将小文件直接嵌入到HTML或CSS中的技术方案，无需额外的HTTP请求。其标准格式为：
data:[<mediatype>][;base64],<data>
例如一张PNG图片的Data URI：data:image/png;base64,iVBORw0KGgo...

常见场景包括：① 将小图标、Logo直接嵌入HTML，减少HTTP请求；② 在CSS中内联背景图片；③ 在邮件HTML中嵌入图片，避免外部资源被屏蔽；④ 将Web字体转为Base64嵌入CSS；⑤ 生成纯前端的文件下载链接（如导出CSV）。

优点：减少HTTP请求数量，加快小资源加载；避免外部依赖，资源自包含；适合邮件等离线场景。
缺点：Base64编码会使体积增大约33%；无法被浏览器单独缓存；大文件会显著增加HTML/CSS体积；不便于维护和更新。

Base64编码会将每3个字节编码为4个字符，因此体积大约增加 33.3%。例如一个100KB的图片，转成Base64 Data URI后大约为133KB。加上Data URI的头部信息（MIME类型等前缀），实际增幅略高于33%。

建议仅在以下情况使用Data URI：① 文件非常小（通常 < 10KB）；② 资源需要与文档强绑定（如邮件中的图片）；③ 需要减少关键渲染路径上的请求数；④ 生成动态内容（如Canvas导出）。对于大文件或需要频繁更新的资源，使用外部URL配合缓存策略更为合适。

现代浏览器（Chrome、Firefox、Safari、Edge）均完整支持Data URI。IE8+也支持，但IE8对Data URI的长度限制为32KB。移动端浏览器支持良好。建议对于需要兼容旧版IE的场景，避免使用Data URI或控制其大小。

在CSS中使用Data URI非常直接：
background-image: url("data:image/png;base64,iVBORw0KGgo..."); 这种方式常用于小图标、纹理背景等，可以避免额外的图片请求，提升页面加载性能。
🔧 相关工具