Base64 to image converter

Base64 writes binary data — a finished image file included — as a string of ordinary text characters. The conversion works three bytes at a time. A byte holds eight bits, while a single Base64 character carries six. Three bytes of a file therefore fit into exactly four characters of text. The alphabet has 64 positions: capital letters A to Z, small letters a to z, digits 0 to 9, plus and slash. When the data runs out before a group of four is complete, an equals sign fills the free places.[1]

E-mail attachments are carried this way, and an image reaches the code of a page the same way, with no separate file on the server.[2]

The string on its own says nothing about what it shows. That is the job of a data URI, an address whose shape is set out in RFC 2397 from August 1998. It reads data:[type][;base64],data. For a PNG image the opening looks like this: data:image/png;base64, — and the string itself follows the comma. When the type is left out, the receiving side assumes it was handed plain text.[3]

Browsers now block opening data: addresses in the main window, because phishing pages were being served that way.[4] An image held in such an address is therefore read in the code that contains it, or in a tool that understands the address. Paste the string into the field above and press the Decode button.

Paste the string into the Base64 field on the left and press the Decode button. The image appears in the Image preview card, and a Download button underneath saves it to disk as decoded-image. The Clear all button empties the field and the preview together.

The data:image/png;base64, prefix can come along with the string, or stay behind in the code you copied from. Without it the converter reads the first eighteen bytes of data and recognises the format from the file signature. That reading decides the extension of the download: a BMP image is saved as decoded-image.bmp, and a site icon as decoded-image.ico.

A string copied out of an e-mail source is usually broken every 76 characters, and the converter reads it in exactly that shape. The standard that browsers follow when reading Base64 calls for every whitespace character to be removed first, spaces and line endings included.[5] A string pasted across a dozen lines gives the same image as one pasted in a single line.

All of the work happens on your own computer. The string stays in the memory of the open tab, the file is built on your device, and both leave the browser memory once the page is closed.

Above the fields sits a format switcher reading Base64 to JPG. Clicking either of the two formats opens a list, and picking from it takes you to the converter that handles that pair. The opposite direction, writing a finished file as a string of characters, is handled by the image to Base64 converter.

The text form needs four characters for every three bytes, so the string takes up more room than the data it describes. The arithmetic is short: divide the number of bytes by three, round up, and multiply by four.

Two numbers come out of that formula and they give the scale. A site icon weighs 2,678 bytes and encodes to 3,572 characters. A photo measuring 1920 by 1280 pixels weighs 476,485 bytes, and its text form runs to 635,316 characters. The growth comes to roughly a third each time, around 33 percent.[2] That is also how much a stylesheet or a message template grows once such an image is pasted into it.

Base64 carries data across and changes nothing inside it. What you get after decoding is byte for byte the file that was encoded. We checked this on eight files of different formats, comparing their checksums before encoding and after reading them back.

The length of the string is capped by the browser itself. Chromium and Firefox accept data: addresses up to 512 MB today, and Safari up to 2048 MB. In Firefox that ceiling moved twice. Version 97 raised it from 256 KB to 32 MB. Version 136 took it to the present 512 MB.[4]