Data URL Generator & Parser
A data: URL is a complete file inside a strings — MIME type, encoding and bytes together, ready to paste into HTML or CSS with no separate request. Paste one here and you get the original file back; drop a file in and you get a data: URL out.
Processed as you paste — no button to press (Ctrl+Enter converts now / Esc clears)
Drop a file here, or — Ctrl+V a screenshot works too
Any file type · 100 MB maximum
Paste, drag and drop, or Ctrl+V a screenshot
What a data: URL looks like
For example: data:image/png;base64,iVBORw0KGgoAAAANSUhEUg.... Everything before the comma describes the payload; everything after is the content itself — Base64 for binary files, percent-encoded text otherwise.
When to use one, and when not to
Good fit: small icons, one-off assets in an email template, a page that must render from a single self-contained file, a favicon that would otherwise cost a request.
Poor fit: anything large. A data URL cannot be cached separately from the document, it inflates the file by about 33 percent, and browsers re-parse it on every render.
Three mistakes that break inline assets
- Wrapping the line — a data URL must be one continuous string; a newline in the middle breaks it
- Keeping the prefix when decoding —
data:image/png;base64,is a marker, not data; the decoder strips it, but other tools will not - Forgetting the
;base64marker — without it the payload is read as percent-encoded text, not binary, and the file is silently corrupted
Frequently asked questions
Is a data: URL the same thing as Base64?
No — a data: URL is a container that may carry Base64. It wraps a MIME type around either Base64 content or percent-encoded text; the ;base64 marker is what tells the browser which.
What about data: URLs without the ;base64 marker?
Those hold percent-encoded text rather than binary. This tool recognises the form and attempts Base64 decoding anyway when the content looks like it, reporting what it did.
Which image formats can be previewed?
Any format your browser renders: PNG, JPEG, GIF, WebP and SVG are all supported, and the preview reflects the decoded bytes rather than a conversion.