Data URL 适合小素材（约 4 KB 以内）。较大的资源会让 HTML/CSS 变大，并失去缓存优势 —— 改用独立请求加载。
为什么用这个工具
03数据链接生成器在浏览器本地运行，适合快速处理与复制结果。
数据链接生成器适用于日常高频小任务，打开即用。
默认本地处理，便于快速检查与复制结果。
如何使用
02复制前快速检查
03先确认输入格式符合你的预期。
在把结果用于文档、链接、配置或消息前快速扫一眼。
只复制你真正需要的输出。
使用场景
Generate a data URL for a small SVG or PNG icon (~1-2 KB) and use it as a CSS background-image. Removes one HTTP request, which can matter for above-the-fold rendering.
Email clients often block external images. Inlining a small profile photo or logo as a data URL ensures recipients see it regardless of the client's external-image policy.
When you need a self-contained HTML page (offline doc, single-file demo, screenshot of a UI), inlining the assets as data URLs is the cleanest way to keep everything in one file.
When prototyping in CodePen, JSFiddle, or a single-file demo, data URLs avoid the need to host the asset somewhere. Paste the URL inline and the asset is part of the page.
Want to see the raw Base64 of an unknown binary file (maybe to inspect headers or hash it)? Drop it in and the data URL gives you the encoded bytes you can feed to other tools.
使用技巧
- 01Data URL size is roughly 33% larger than the file
Base64 encoding adds ~33% overhead. So a 3 KB image becomes ~4 KB data URL. Plus a small MIME header. Always check the resulting URL length against the original file size to decide if inlining is worth it.
- 02Cache-busting cuts both ways
Inlined assets are part of the parent file, so they don't have their own cache entry. If multiple pages share an asset, separate hosting (with proper cache headers) is more efficient. If only one page uses the asset, inlining wins.
- 03SVG can be smaller than its data URL — try inline SVG instead
For SVG specifically, pasting the SVG markup directly in HTML (<code><svg>...</svg></code>) is usually smaller than the equivalent data URL (no Base64 overhead, no MIME header). Use data URL for SVG only when you specifically need a URL (e.g., CSS background).
- 04Some MIME types matter for browser behavior
Browsers use the MIME prefix to decide how to render the data URL. <code>image/svg+xml</code> as a CSS background renders as an image; <code>text/html</code> in an iframe renders as a page. Verify the MIME guess matches your intent — the browser uses the file extension as a hint but isn't always right.
常见问题
01
这个工具会上传数据吗？
默认在浏览器本地处理。
相关工具
03Base64 编解码→
在普通文本和 Base64 之间双向转换。
图片压缩与格式转换→
在浏览器里把 JPEG/PNG/WebP 图片压缩、缩放、换格式，全程不上传。
HTML 转义→
HTML 转义，在浏览器中快速完成单项任务。