Image to Base64 Converter

This converter turns an image into a Base64 data URI: a single line of text that contains the whole picture and can be pasted straight into HTML, CSS or JSON instead of linking to a separate file. The result downloads as a small .txt file ready to copy from.

What the output looks like

Every result is a PNG data URI in the format defined by RFC 2397, with the image bytes encoded using the Base64 alphabet from RFC 4648:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…

The part after the comma always begins with iVBORw0KGgo, which is simply the PNG file signature written in Base64. The tool redraws your image and encodes it as PNG whatever format you upload, so a JPG photo produces a PNG data URI too.

Using the data URI

1. Drop an image onto the upload box and click Process image. The Result label shows the size of the text in KB.
2. Click Download result to save yourfile-base64.txt, open it and copy the full contents.
3. Paste it wherever an image URL would normally go.

In HTML: <img src="data:image/png;base64,…" alt="Logo">

In CSS: background-image: url(data:image/png;base64,…);

Make sure you copy the entire string; a single missing character at the end breaks the image.

The size cost of Base64

Base64 represents every 3 bytes of binary data with 4 text characters, so the encoded text is about 33% larger than the PNG it came from. A 12 KB icon becomes about 16 KB of text; a 30 KB graphic becomes about 40 KB. Because the output is always PNG, a photo that was a compact JPG can become very large, since PNG stores photographs much less efficiently.

To keep data URIs small, shrink the pixel dimensions first with the image resizer. An icon displayed at 32 px has no reason to be encoded at 1000 px.

When inlining an image is a good idea

• Tiny interface graphics such as icons, bullets and small logos, where one fewer file request is worth more than the extra bytes.
• Self-contained files: a single HTML report, an offline demo page, or a code snippet that must work without external assets.
• JSON or API payloads that need to carry a small image inside a text field.
• Quick prototypes where uploading images to a server is overkill.

When a normal image file is better

• Large photos: they bloat your HTML or CSS, delay the text from appearing and can't be cached separately by the browser.
• Images used on many pages: a separate file downloads once and is cached; an inline copy is downloaded again inside every page.
• Emails: support for data URI images varies between email clients, so test before relying on it.

For turning ordinary text rather than images into Base64, use the Base64 encoder. The image is encoded locally in your browser and never sent to a server.