Image to Base64 converter

Base64 writes binary data, such as a JPG or PNG file, as a string of ordinary text characters. Every three bytes of the file become four characters from an alphabet of 64: upper and lower case letters, digits, the plus sign and the slash[1]. An image written this way goes straight into page code, a stylesheet or a JSON field, with no separate file on the server.

The string alone does not say it is an image. The data: URL, described in RFC 2397, does that by putting the file type in front of the string, for example data:image/png;base64,. The string itself starts after the comma[2]. The same URL works as an image in Markdown, written as ![description](data:image/png;base64,…), and the Markdown to HTML converter shows it in the preview. The alphabet and the opposite direction, from string to file, are covered by the Base64 to image converter.

Drag a file onto the Image field, or click it and choose an image from your device. The Base64 field shows the result at once, in the form set on the Output format list. By default that is data: URL, the string preceded by the file type, for example data:image/jpeg;base64,.

You can change the list at any time without adding the image again. HTML <img> tag gives a ready element with the URL in the src attribute, CSS background (background-image) gives a declaration for a stylesheet rule, and Base64 string only keeps just the characters after the comma. The Copy button copies the result in the chosen form, and Download saves it as a text file, for example logo-base64.txt. Clear all empties the result field.

The tool encodes one file at a time and takes the first of several dropped files. A file that is not an image stops the encoding with the message Only image files are supported.

Text needs four characters for every three bytes, so the string is about a third longer than the file[1]. You can work out the length yourself: divide the bytes by three, round up and multiply by four. A 2,678 byte site icon gives 3,572 characters, and a 1,405,512 byte camera photo gives 1,874,016.

An embedded image is part of the file it sits in. The browser downloads an image from a stylesheet together with the stylesheet, so every change to the stylesheet downloads the image again. The same image pasted into five HTML pages travels with each of them separately. That is why Base64 suits icons and small graphics, while a photo for an article stays an ordinary file.

The browser limits the length: Chromium and Firefox accept data: URLs up to 512 MB, and Safari up to 2048 MB. Firefox moved that limit twice, from 256 KB to 32 MB in version 97 and to 512 MB in version 136[3]. Browsers do block opening data: URLs in the main window, because phishing pages were spread that way[3]. A string pasted into the address bar will not show the image, while the same string in a src attribute will.

Gmail does not display images written as data: URLs, neither in the browser nor in the iOS and Android apps. caniemail.com tested this in February 2020 and tested the browser version again in May 2024, with the same result[4]. Outlook for Windows versions 2007 to 2016 behave the same way.

Put the logo in a signature or newsletter on a server as an ordinary file and use its address instead. The email signature generator works this way: the Avatar / logo (image URL) field takes the address of an image, not a Base64 string.