Image ↔ Base64

What is image-to-Base64 conversion?#

A data URL is a string that embeds a whole file inline, prefixed with its MIME type: data:image/png;base64,iVBORw0KGgo…. Once an image lives inside such a string it behaves like text — you can paste it into HTML, CSS, JSON, a Markdown file or a source file, and the consumer renders it without ever fetching a separate file. This page turns an image file into a data URL and turns a data URL back into a viewable image, entirely in your browser.

Base64 inflates binary data by about 33% (every three bytes become four ASCII characters), so a data URL is larger than the file it replaces. The trade-off is worth it when you want zero external requests: HTML email signatures, single-file demos, favicons inlined into a <head>, icons bundled into a JSON config, or assets in environments (some CSP-locked pages, sandboxed previews) where loading an <img src> from disk is not an option.

This tool parses data URLs per RFC 2397, accepts both base64 and URL-encoded text payloads, detects the MIME, and validates that it is actually an image before previewing — so pasting a broken string fails loudly instead of rendering a broken-image icon.

How to use it#

1. Drop an image onto the dashed zone, or click Upload and pick a file. PNG, JPEG, WebP, GIF, SVG, BMP, AVIF and ICO are all accepted.
2. The Data URL textarea on the left fills with the full data:image/…;base64,… string. Use Copy on the right to grab it.
3. To go the other way, paste a data URL into that same textarea. The preview on the right re-renders the image, and Download saves it back as a real file with the correct extension.
4. Clear empties both panes.

The MIME is read from the data URL header, not guessed from the file extension — so renaming a .png to .jpg will not fool the tool, and the download extension always matches the actual type.

Key features#

• Two-way conversion. Image → data URL for embedding; data URL → file for extracting. The same pane handles both directions.
• MIME-aware. The suggested download extension is derived from the actual media type (image/svg+xml → .svg, image/jpeg → .jpg), not the filename.
• Validates before preview. Malformed strings are flagged as invalid rather than silently showing a broken image.
• Handles arbitrary bytes safely. Base64 encoding is chunked so multibyte and binary payloads round-trip without corruption.
• Stays local. The FileReader and atob/btoa APIs do the work in-page; nothing is uploaded.

Worked example#

You have pixel.gif, a 1×1 transparent tracking pixel (the kind email clients use as an open beacon), 43 bytes. Upload it. The Data URL textarea produces the complete, exact string:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

That is a real, complete data URL — paste it into an <img src="…"> in HTML, a CSS background-image: url('…'), or a JSON field and the consumer renders the original pixel with zero file fetch. The MIME (image/gif) and the .gif download extension both come from the data URL header, not the original filename.

For a larger photo the principle is identical — only the base64 body grows (roughly 1.33× the byte size) and the MIME becomes image/jpeg or image/webp.

FAQ#

Why is my data URL so much larger than the original file?#

Base64 represents every three bytes as four characters, so the string is roughly 1.33× the binary size. For large images this is wasteful — consider the compress tool first, or host the file and link it instead of inlining.

Is there a size limit?#

The browser handles data URLs up to hundreds of megabytes, but in practice anything over a few hundred KiB bloats your HTML, CSS and JSON and slows parsers. Inline only small icons, logos and sprites.

Can I convert an SVG?#

Yes. SVG has MIME image/svg+xml and is already text, so the data URL is compact and round-trips losslessly.

The data URL I pasted says “invalid”. What happened?#

The string must start with data: and contain a comma separating the header from the payload. A truncated copy, a stray leading space, or a missing ;base64 flag will all fail parsing. Re-copy the full string, header included.