Image to Data URL / Base64
Turn an image into a data URL, raw base64, a CSS background-image or an HTML img snippet — with MIME type, byte count and base64 overhead. Paste a data URL back to preview it and estimate the original file size.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Images are read locally in your browser and never uploaded
Pick an image first
Pick an image or paste a data URL and the result shows up here.
What this tool does
- Inline icons, loading spinners and email-signature images into HTML or CSS with a data URL, so no extra request is made and single-file bundles cannot lose the asset.
- Get a snippet in the form you need: data URL, raw base64, background-image: url("…") or <img src="…" alt="…" />, each one click away.
- Weigh the cost before inlining: the tool reports the MIME type, original byte count, base64 length and the roughly 1.3333× overhead, so a large image is obviously not a candidate.
- Debug in reverse: paste a data URL back in to preview the image and estimate the original file size, so you can tell what that blob actually is.
Example
Input
A 1 × 1 pixel red PNG, 69 bytes in total
Output
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC MIME type image/png · 69 B original · base64 length 92 · overhead 1.3333
The "data:image/png;base64," prefix takes 22 characters, making the whole string 114. The overhead is 4 × ceil(69 / 3) / 69 = 1.3333 — base64 inflates a payload by roughly one third. Reading the file and previewing the image rely on the browser File API and Image decoder.
Frequently asked questions
How large can an image be before inlining is a bad idea?
A practical ceiling is 5–10 KB — icons, simple SVGs, 1×1 placeholders, loading spinners. Base64 inflates the payload by about a third, and an inlined asset cannot be cached separately by the browser, so the same icon repeated across pages is downloaded again each time.
Why is the data URL so much bigger than the file?
Base64 encodes 4 printable characters for every 3 bytes, so the theoretical overhead is 4/3 ≈ 1.3333, plus the prefix. The formula is 4 × ceil(bytes / 3). That is why inlining large images bloats the HTML and slows parsing noticeably.
Which inputs fail in reverse mode?
Three cases: the string does not start with data:, the payload is not base64 (data:text/plain,hello is rejected as unsupported), or the base64 part is empty or contains illegal characters. A missing MIME type is treated as text/plain.
Can I use the generated CSS and HTML snippets as-is?
Yes. The CSS snippet is background-image: url("data:…"); and the HTML one is <img src="data:…" alt="image" />, with & < > and " escaped in the alt text. Because the URL is very long, keep it in a dedicated stylesheet or variable rather than in the middle of business code.
Are my images uploaded?
No. The file is read locally into an ArrayBuffer through the File API, base64 encoding is plain JavaScript, and previews use a Blob URL. No network request is made at any point.
Keywords：data urlbase64 图片图片转 base64data uricss background-imagehtml imginline image内联图片