Image to Base64 Converter

Two Files, Encoded

The first file is a 2×2 blue PNG of 95 bytes. The tool reports PNG · 2 × 2 px · 95 bytes → Base64 128 characters (+34.7%), and the HTML <img> output is:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAEUlEQVR4nGNQTX79H4QZYAwAUe4JyX4GS0cAAAAASUVORK5CYII=" width="2" height="2" alt="dot">

The width and height come from the decoded image, so the browser can reserve the space before the image loads. The alt text is the file name; change it to describe the image. The growth is more than 33.3% because Base64 works in groups of 3 bytes: 95 bytes is 31 full groups plus 2 bytes, and the last group is padded to 4 characters with = (RFC 4648, section 4).

The second file is a 139-byte check-mark icon, check.svg. For SVG the tool offers two data URIs: Base64 is 214 characters and URL-encoded is 198. The shorter one is selected, and the CSS output is:

background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%223%22%3E%3Cpath d=%22M5 13l4 4L19 7%22/%3E%3C/svg%3E%0A");

Only the characters that change meaning are escaped. # must be %23, because the URL parser treats it as the start of a fragment and drops the rest of the icon, so #16a34a would break the image. Line breaks become %0A, because the parser deletes raw tabs and newlines, which can join <svg to the next attribute. " is escaped so the URI can sit inside url("…") or an HTML attribute, and & is escaped so an HTML parser does not turn & into &. Spaces and single quotes stay as they are. The bytes are escaped one at a time, so the file’s own character encoding is kept.

The Type Comes From the File, Not the Name

A data URI states a type, and that type should match the bytes. The in-browser converters tested below copy the type the browser reports, and Chromium takes that from the file extension: a PNG named .jpg is reported as image/jpeg. The tool reads the first bytes instead and matches them against the image signatures in the WHATWG MIME Sniffing standard: PNG, JPEG, GIF, WebP, BMP and ICO. It also checks the ftyp brands of AVIF and HEIC, the TIFF and JPEG XL headers, and the start of SVG text. A PNG named logo.jpg therefore gives data:image/png, with a note about the extension. A file without an extension is detected the same way. A PDF or ZIP gets an error that lists its first bytes.

This matters most when the image goes to an API. OpenAI’s image input guide sends a data URI in image_url.url and accepts PNG, JPEG, WebP and non-animated GIF. Anthropic’s vision guide takes the bare Base64 in data and the type in a separate media_type field, and supports JPEG, PNG, GIF and WebP. For the first, copy Data URI; for the second, copy Base64 and use the type the tool shows. A photo from an iPhone set to “High Efficiency” is HEIC, which neither list includes, and the tool labels it as HEIC even when the name ends in .jpg.

Base64 Back to an Image

Base64 → Image accepts bare Base64, a data URI, or a whole snippet that contains one: a CSS rule, an <img> tag, a Markdown image, or JSON where / is escaped as \/. Line breaks and the URL-safe alphabet (- and _) are accepted, and missing = padding is accepted. The decoded bytes are checked the same way as files, and the download gets the matching extension. When a data URI says image/png but the bytes are WebP, the tool says so and saves image.webp.

When the text cannot be decoded, the tool names the place. Pasting the PNG data URI above with its last three characters cut off gives: “After removing spaces the Base64 text has 125 characters. A length that leaves 1 when divided by 4 cannot be decoded, so a character is missing or extra.” A full-width space inside the text is reported with its position.

How It Compares

Tested on 2026-09-30 in desktop Chromium with the same files: a PNG renamed to .jpg, an iPhone-style HEIC, a PNG with no extension, and the SVG from the first example.

The server-side tools get the PNG right because they read the bytes, but the file leaves your computer. The in-browser tool in the table takes the type from the name.

Limits

• File size: up to 100 MB. The Base64 of a 100 MB file is about 140 million characters. Outputs over 2,000,000 characters are not shown in the box (an 85 MB file used to freeze the page there); Copy and Download .txt give the full text. Chromium and Firefox limit a data URL to 512 MB and Safari to 2048 MB (MDN).
• Preview: the thumbnail uses your browser’s decoder. HEIC and HEIF display only in Safari 17 and later (Can I use), and TIFF only in Safari (MDN image format guide). The Base64 is complete either way.
• One file at a time, and no image URLs: the tool makes no network requests, so save the image first.
• No resizing or compression. Shrink the file first with the Image Compressor, or clean an SVG with the SVG Optimizer. URL encoding keeps the SVG byte for byte.
• Decoding knows image formats only. For Base64 of any other file, use Base64 Encode / Decode.
• Inlining is not always faster. An inlined image is cached only with the HTML or CSS file that contains it, and any change to the image changes that file. It suits small icons that are used once, and a separate file suits photos and images shared across pages.