Image to Base64 Converter

Q: Can I use an SVG as a data URI?

Yes. SVG can be Base64 encoded like any image. For SVG, a URL encoded data URI data:image/svg+xml,%3Csvg… is often shorter; this tool decodes both forms.

Convert an image to Base64 or a data URI with ready-to-paste CSS and HTML, or decode Base64 back to an image with a preview. Free, private, no upload.

Image → Base64

Drop an image here or click to choose it Your files stay on your device: they are never uploaded.

Output Output

Base64 → image

Base64 text or data URI

How to convert an image to Base64

In Image → Base64, drop an image on the drop zone or click it to choose one (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
Choose the Output: Data URI (data:image/png;base64,…), Base64 only, CSS background-image or HTML tag, which also carries the image’s width and height.
Click Copy, or Download as .txt for long results.

The line under the drop zone gives the real format (read from the file’s bytes, not its name), the dimensions, the file size and the length of the data URI.

How to convert Base64 back to an image

In Base64 → image, paste the text into Base64 text or data URI. You can paste a bare Base64 string, a full data URI, or even a whole CSS rule or <img> tag: the data URI is found inside it. Line breaks and spaces are ignored, and URL-safe Base64 (with - and _) works too.
Click Decode image. The preview, the type, the dimensions and the size appear.
Click Download image to save it with the right file extension.

The type is checked with the file’s “magic bytes”, the signature at the start of every image format (for example 89 50 4E 47 for PNG or FF D8 FF for JPEG). If a data URI claims to be image/jpeg but contains a PNG, the tool tells you and uses the real type. Anything that is not a recognized image is refused, and the limit is 20 MB of image data.

How Base64 works

Base64 turns every 3 bytes of a file into 4 printable characters taken from A–Z, a–z, 0–9, + and /, with = as padding at the end. That is why the encoded text is about 33 % larger than the file: a 30 KB icon becomes about 40 KB of text. A data URI adds a short header, data:<type>;base64,, so a browser knows how to read it.

When to inline images as data URIs

Data URIs are handy for:

small icons, logos and backgrounds in CSS, to save a request;
HTML emails and single-file HTML documents that must work without external files;
JSON APIs and configuration files that can only carry text.

They are a poor fit for large photos. The text is a third larger than the file, it cannot be cached separately from the page or style sheet that contains it, and it delays rendering. Above roughly 10 to 100 KB, a normal image file served with good caching usually wins, which is why the tool shows a reminder for images over 100 KB.

Everything runs in your browser: images and pasted text are never uploaded.

Frequently asked questions

Is Base64 a way to compress or protect an image?

No. Base64 makes the data about 33 % bigger and anyone can decode it. It only turns binary data into text that can travel where binary data can’t.

Why does my data URI not display?

The most common causes are a missing or wrong type in the header, spaces or quotes pasted into the middle of the string, or truncated text. Paste it into Base64 → image: the tool reports invalid characters and checks the real type.

Can I use an SVG as a data URI?

Yes. SVG can be Base64-encoded like any image. For SVG, a URL-encoded data URI (data:image/svg+xml,%3Csvg…) is often shorter; this tool decodes both forms.

Does it work with HEIC or AVIF images?

Encoding works with any image file. The preview only appears if your browser can display the format, but the Base64 text and the download are always correct.

Is there a size limit?

Yes, 20 MB of image data, both ways. Larger strings make browsers slow and are rarely a good idea in a web page.