Image to Base64 Converter

Encoding a picture takes one file and one click, and the result is ready to paste.

1. Drop an image on the upload area or click it to choose one. The tool takes a single file at a time, and choosing another replaces the first. PNG, JPG, GIF, WebP and SVG all work.
2. Open Output as and pick the form you need: Data URI (the default), Raw Base64, HTML <img> tag or CSS background-image.
3. Click Convert to Base64. To try another style, change the menu and click the button again.
4. Read the result card. It shows a thumbnail, the image size, the size of the text, the overhead as a percentage and the file type, above a read-only box holding the output.
5. Click Copy to put the text on your clipboard, or Download to save it as a text file named after your image.

HTML, CSS, JSON and email are text formats, and raw image bytes can break them. Base64 solves this by reading the file three bytes at a time and writing each group as four characters from a 64-symbol alphabet of letters, digits, plus and slash, with equals signs as padding at the end. As a tiny example, the three letters Man are the bytes 77, 97 and 110. Written in binary and regrouped into four 6-bit values, they become 19, 22, 5 and 46, which spell TWFu.

Four characters for every three bytes means the text is about one third larger than the file. A 3,000 byte icon becomes 4,000 characters, and a 1,000 byte one becomes 1,336. The data URI adds a short prefix such as data:image/png;base64, on top. The overhead on the result card is measured on the output you chose, so the img tag and CSS styles add a few dozen characters more. Encoded files begin with a recognisable signature: PNG starts iVBORw0KGgo, JPEG /9j/, GIF R0lGOD and WebP UklGR.

The file is read with the browser FileReader and the original bytes are encoded untouched. Nothing is re-compressed, so any EXIF metadata inside a photo, including GPS position, travels inside the string. Clean the picture first with the EXIF remover if that matters.

An inline image saves one network request, which pays off in particular cases:

• Small icons and logos of a few kilobytes, where the request costs more than the bytes.
• Background images inside a stylesheet, which are then cached together with the CSS file.
• Single-file HTML pages, reports and offline demos that must work without other assets.
• JSON payloads, test fixtures and code samples where hosting a separate file is awkward.

Larger pictures are a poor fit. An image inside an HTML page cannot be cached on its own, so it is downloaded again on every visit, and it makes the page about a third heavier than the file itself. A common rule of thumb is to inline only images under about 10 KB. Shrink the source first with the image compressor if the string is too long.

Test before relying on data URIs in email, because several major webmail and desktop clients block or strip them. Strict content security policies can also block them unless data: is allowed for images. For plain text rather than pictures, use the Base64 encoder and decoder.

The HTML option produces an img tag whose alt text is the file name without its extension, so replace it with a proper description. The CSS option produces a ready background-image: url("data:..."); declaration. The converter works in one direction and does not turn Base64 text back into a picture. SVG files are encoded as they are; for SVG an URL-encoded form is often smaller than Base64, and the URL encoder can produce one. Very large files make a very long string that slows editors and browsers, so keep the input small, or convert a different format first with the image converter when a smaller type suits.