Image to Base64 Converter

To convert an image to Base64, drop the file on the upload box or choose Select File, then select Generate Data URI. You get a string like data:image/png;base64,iVBORw0KGgo... plus ready-to-paste HTML, CSS and JavaScript snippets. The image is read by your browser, so it's never uploaded.

How to convert an image to Base64

1. Add the image. Drop a PNG, JPG, GIF, WebP, SVG or ICO file on the upload box, or choose Select File. The MIME Type field fills in from the file.
2. Name the asset. Type a Variable / Name such as heroLogo. It's used as the JavaScript constant name and the image's alt text; if you leave it blank, the file name is used.
3. Pick the output. Choose the Primary Snippet: Raw Data URI, HTML <img>, CSS background-image or JavaScript const. All four also appear under Ready-to-use snippets.
4. Generate and copy. Select Generate Data URI (Ctrl+Enter), then Copy Primary Output, a snippet's own Copy button, or Download .txt.

What is a data:image/png;base64 URI?

A data URI puts a file's contents inside the URL itself, so the browser doesn't make a separate request for it. The format comes from RFC 2397: data:[<media type>][;base64],<data>. For a PNG it looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

image/png is the MIME type, ;base64 says the data is Base64-encoded, and everything after the comma is the image. Every PNG's Base64 starts with iVBORw0KGgo, the encoded PNG signature. You can use the whole string anywhere a URL is expected:

<img src="data:image/png;base64,iVBORw0..." alt="logo">
.icon { background-image: url("data:image/png;base64,iVBORw0..."); }
const logo = "data:image/png;base64,iVBORw0...";

Those are the three snippets the tool writes for you. For non-image files, the HTML snippet becomes a download link instead of an <img> tag.

When to embed images as Base64, and when not to

Base64 turns every 3 bytes into 4 characters, so a data URI is about a third larger than the file. The summary cards show both numbers: Original Size and URI Size. That overhead is worth it for small assets and a poor trade for large ones.

A practical rule: inline icons and logos of a few kilobytes, and keep photos as normal files. If the image is large, scale it down first with the image resizer before you convert it.

SVG to data URI: Base64 or URL-encoded

SVG is text, so it doesn't need Base64. With Prefer UTF-8 SVG URI when possible ticked (the default), the tool URL-encodes the markup instead. It swaps double quotes for single quotes (or encodes them as %22 when the SVG already contains single quotes, so nothing breaks), escapes <, >, # and a few other characters, and collapses whitespace. This 110-character SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="#e11d48"/></svg>

becomes:

data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23e11d48'/%3E%3C/svg%3E

The encoded body is 124 characters, against 148 for Base64, and it stays readable. Untick the option if a tool you use expects ;base64. Use Load SVG Sample to see the difference on a larger file. You can also paste SVG markup into the text box, set Text Input Mode to SVG markup and generate from that.

Base64 to image: turning a string back into a file

This page only converts files to Base64. To go the other way, paste the string, with or without its data:image/png;base64, prefix, into the Base64 decoder. It works as a Base64 image decoder: it reads the image type from the prefix and Download saves the picture as decoded-image.png or .jpg, .gif, .webp.

To just look at one, paste the full data URI into your browser's address bar and press Enter. Chrome and Firefox show a data:image URI that you paste there yourself, though they block web pages from opening one as a top-level page.

Frequently asked questions

Updated 11 October 2026Reviewed by the ToolzyLab teamHow we test our tools