Skip to content
user@convertitive:~$convertitive

Image to Base64 (and back)

Encode any image to a data URI, or paste a URI and see the image.

Base64 data URIs let you embed an image inline in HTML, CSS, or JSON without a separate file. Useful for tiny SVG icons, inline email signatures, JWT payloads that include an avatar, or anywhere a network request would be more trouble than it’s worth. The tool below encodes or decodes images entirely in your browser using the standard FileReader and atob/btoa APIs.

Everything happens locally — the FileReader API runs entirely in your browser. No upload, no analytics on the file contents.

How to use

  1. Pick a direction

    "Image → Base64" encodes a file you drop. "Base64 → Image" decodes a data URI you paste in.

  2. Drop or paste

    Drag a file onto the dropzone (encode), or paste the data URI into the textarea (decode). Files up to 8 MB are accepted.

  3. Copy or save the result

    Encoded output is a full data URI ready to drop into <img src="…">, CSS background-image: url(…), or JSON. Decoded preview renders below the paste field.

Frequently asked questions

Is the image uploaded anywhere?
No. The conversion happens in your browser via the FileReader API — bytes never leave the page. There's also no analytics event that includes the file contents.
Why is the data URI bigger than the file?
Base64 encoding inflates binary data by about 33% (every 3 bytes become 4 characters). For a 100 KB image, expect ~133 KB of text. That's the cost of embedding binary data in a text container.
When should I inline an image instead of linking it?
When the image is small (< 10 KB), used once, and a separate HTTP request would slow critical rendering. Examples: hero-section SVG, inline email logos, JWT-embedded avatars. Beyond ~10 KB, a separate file is usually faster overall because it can be cached separately.
What's the MIME type for SVG?
`image/svg+xml`. The encoder reads it from the file's `type` attribute, which the browser sets correctly for standard image formats.
Can I encode non-image files?
This widget is image-only by design (and validates the data URI prefix on decode). For arbitrary binary → Base64 see /code/base64/, which handles UTF-8 text directly.

About

What's a data URI?

A URI scheme defined in RFC 2397 that embeds the resource inline. `data:image/png;base64,iVBORw0KGgo...` declares the MIME type, says the payload is Base64-encoded, and includes the bytes after the comma. Browsers and most parsers accept it anywhere an http(s) URL would be expected in image contexts.

Encoding speed

FileReader's `readAsDataURL` is asynchronous and uses the browser's native Base64 implementation. Expect under 100 ms even for several-MB files; the bottleneck is reading the file off disk, not the encoding itself.