Image to Base64 Converter

Turn an image into a Base64 data URI for CSS, HTML or JSON, or paste a Base64 string and get the image file back.

Drop your files here

.jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .avif, .ico, .txt · up to 10 MB

Choose files

Image to Base64Base64 to image

More settings

OutputBreak lines every 76 characters

How to convert an image to Base64

1
Drop your image or paste a Base64 string
Add up to twenty images to encode, or switch direction and paste a string you already have. A .txt file holding the string works too.
2
Pick a direction
Encoding gives you a data URI or the raw Base64 payload. Decoding gives you a downloadable image file with the right extension.
3
Copy the string or download the file
Copy the result straight into your stylesheet, or save the decoded image. A batch of images comes back as a ZIP with one text file each plus a combined JSON.

What Base64 actually does

Base64 does not compress or convert anything. It re-writes the same bytes using only 64 characters that survive being pasted into text. Three bytes become four characters, which is why the result is always about a third larger than the file. The point is not size but placement: a data URI can live directly inside a stylesheet, an HTML attribute or a JSON field, in places where a link to a separate file would be awkward or impossible.

Data URI or raw payload

A data URI is the full string starting with data:image/png;base64, and it is what a browser expects in a CSS background or an img src. The raw payload is everything after that comma, which is what an API field or a database column usually wants, because the type is recorded separately there. Both come from the same bytes, so you can switch between them without re-encoding anything.

The type comes from the bytes

The MIME type written into the data URI is read from the first twelve bytes of the file rather than from its name, so a PNG that someone renamed to .jpg still comes out as data:image/png. That matters because a browser refuses to render a data URI whose declared type does not match the content, and when that happens the page, not the file, is what looks broken. SVG is the exception, since it is text: it is recognised by its opening tag rather than a binary signature.

Decoding back to a file

Paste anything: a full data URI, a bare payload, or a string with line breaks in it. Whitespace is stripped, the alphabet is checked before decoding so a truncated paste fails immediately instead of producing a corrupt file, and the resulting bytes are matched against the same signature table to pick the extension. If the bytes match nothing known, the format list opens so you can say what it should be.

Nothing is sent anywhere

Encoding uses the browser's own FileReader and decoding uses its built-in atob. There is no library, no upload and no server. Whatever you paste into the box stays in the tab, which matters when the string is a private document rather than a logo.

Frequently asked questions

Why would I convert an image to Base64?

To embed it directly instead of linking to it. A small icon inlined into CSS saves an HTTP request, an image inside a JSON payload can travel through an API that only carries text, and an email template can carry its own artwork without external references being blocked.

How much bigger does the file get?

About 33 to 37 percent. Base64 spends four characters on every three bytes, plus a short prefix for the data URI. A 100 KB photo becomes roughly a 133 KB string, which is why inlining is worth it for icons and rarely worth it for photographs.

What is the difference between a data URI and plain Base64?

A data URI is the whole thing, data:image/png;base64, followed by the payload, and browsers can use it directly as an image source. Plain Base64 is just the payload, with no type information attached, which is what most APIs and database fields expect.

Is there a length limit for these strings in browsers?

Modern browsers handle multi-megabyte data URIs in CSS and HTML, but editors, terminals and diff tools become unusable long before that. This tool accepts files up to 10 MB, which yields a string of about 13.3 MB, and decodes strings up to 14 MB of content.

How do I decode a string that has no data: prefix?

Paste it and leave the image type on automatic. The decoded bytes are checked against the same signature table used for encoding, so a PNG is recognised by its 89 50 4E 47 header regardless of any prefix. If detection fails, pick the type from the list yourself.

Is it safe to paste someone else's Base64 here?

The string is decoded into bytes and shown as an image preview inside your own tab. It is never uploaded, never executed and never stored. Decoding is just arithmetic, but remember that the bytes you get are only as trustworthy as their source, so treat an unexpected result with the same caution as any downloaded file.

Why does decoding sometimes fail?

Almost always because the string is incomplete. A paste cut short, a line lost when copying out of a terminal, or a URL-safe variant using dash and underscore instead of plus and slash will all fail the alphabet check. Copying the string again from the original source usually fixes it.