Data URL Builder & Inspector
Turn text, SVG, CSS, JSON, or local files into data: URLs, inspect existing ones, estimate payload size, preview supported content, and copy clean snippets for HTML, CSS, JavaScript, or Markdown.
Modes
Build + Inspect
Encodings
Base64 / Percent
Snippets
HTML, CSS, JS, Markdown
Preview
Image / Text / HTML / SVG
Create a data URL
Tip: use percent encoding for small text/SVG/CSS payloads; use base64 for binary files and when you want fewer escaping concerns.
Inspect or decode an existing data URL
Paste any
data: URL to inspect its MIME type, encoding, size, metadata, and decoded content.Decoded content
Decoded content will appear here.
- Inline assets are great for tiny icons, placeholder SVGs, and self-contained demos.
- Large data URLs hurt cacheability and can bloat HTML or CSS bundles.
- UTF-8 SVG often compresses better as percent-encoded text than base64.
Ready-to-copy snippets
HTML
<img src="..." alt="" />
CSS
background-image: url("...");
JavaScript
const dataUrl = "...";
Markdown
