Base64 Encoder / Decoder

Encode text or files to Base64 and decode Base64 back, live in both directions. UTF-8 safe, with a URL-safe alphabet option, data URIs for images and file downloads for decoded data. Everything runs in your browser.

How Base64 works: 3 bytes in, 4 characters out

A Base64 encoder reads binary data 3 bytes (24 bits) at a time, splits those bits into four 6-bit numbers, and maps each number to one of 64 printable characters: A to Z, a to z, 0 to 9, then + and /. Because every character carries only 6 of its 8 bits of storage, the output is 4 characters for every 3 input bytes, about 33 percent larger than the original. Here is the full journey for the three characters "Hi!":

StepEncoding "Hi!"
Input bytesH = 72, i = 105, ! = 33
As 8-bit binary01001000 01101001 00100001
Regrouped into 6-bit010010 000110 100100 100001
As numbers 0 to 6318, 6, 36, 33
Base64 outputS G k h → "SGkh"

When the input length is not a multiple of 3, the encoder pads the final block with one or two = characters so decoders know how many bytes to reconstruct. Two common variants exist: URL-safe Base64 (RFC 4648) swaps + and / for - and _ so the result survives URLs and file names, and MIME Base64 wraps lines at 76 characters for email transport. The toggles above this Base64 converter produce both, and the decoder accepts any of them.

Image to Base64: when inlining helps and when it hurts

Converting an image to Base64 and inlining it as a data URI removes an HTTP request: the bytes arrive with the document itself. That is genuinely useful for tiny assets: a 1 KB icon, a small inline SVG, a logo in an HTML email where clients block external images. For those cases, the File tab above hands you a ready HTML <img> tag or CSS background-image rule to paste straight into your code.

For anything bigger, inlining usually backfires. The Base64 form is about 33 percent heavier than the file it encodes, it cannot be cached separately from the page or stylesheet that contains it, and it is invisible to lazy loading. A hero photo inlined into CSS quietly adds its full weight to every single pageview and drags Largest Contentful Paint down with it. The rule of thumb: inline only what is tiny, serve real image files for everything else, and measure the result instead of guessing.

Changes like this are easy to ship and hard to notice when they go wrong. DevDome Site Health probes your site around the clock and runs a daily audit, so a page that suddenly got heavier or slower shows up before your visitors feel it.

Base64 encoding and decoding FAQ

What is Base64 encoding?

Base64 is a way to represent binary data using 64 printable characters: A-Z, a-z, 0-9, plus + and /. Every 3 bytes of input become 4 characters of output, which lets images, files and other binary data travel through systems that only handle text, such as JSON, XML, email bodies and data URIs. It is an encoding, not a compression and not an encryption.

How do I Base64 encode text with Unicode characters?

The classic JavaScript btoa function fails on characters outside Latin-1, which is why naive encoders break on emoji and accented letters. This Base64 encoder first converts your text to UTF-8 bytes with TextEncoder, then encodes those bytes, so accented words, Chinese characters and emoji all round-trip correctly. Decoding reverses the steps: Base64 to bytes, then bytes back to text as UTF-8.

Is Base64 encryption? Is it secure?

No. Base64 is a reversible transformation with no key: anyone can decode it instantly, including this page. Never treat Base64 as protection for passwords, tokens or personal data. If you need confidentiality, use real encryption such as AES or TLS, and use Base64 only to move the encrypted bytes through text-based systems.

Why is Base64 about 33 percent larger than the original?

Each Base64 character carries 6 bits of information but occupies a full 8-bit byte, so the output needs 4 characters for every 3 input bytes. That 4 to 3 ratio makes the encoded form roughly 33 percent larger, plus up to 2 padding characters. This overhead is exactly why inlining large images as Base64 slows pages down.

What is URL-safe Base64?

Standard Base64 uses + and /, which clash with URLs and file names: + means a space in query strings and / separates path segments. URL-safe Base64, defined in RFC 4648, swaps them for - and _, and usually drops the = padding. JWTs and many web APIs use it. This Base64 converter has a toggle for it, and the decoder accepts both alphabets automatically.

How do I convert an image to Base64?

Switch to the File tab and drop the image in. You get the raw Base64, a ready data URI with the detected MIME type, an HTML img tag and a CSS background-image rule you can copy straight into your code, plus a live preview. The conversion happens in your browser, the image is never uploaded anywhere.

How do I convert Base64 back to a file?

Paste the Base64 string or a full data URI into the decode box on the File tab. The tool validates the input, detects the file type from the data URI header or from the file signature bytes, previews it when it is an image and gives you a download button. That is the fastest path from Base64 to file when someone sends you an encoded attachment or an inline image.