Convert images to Base64 encoded strings, Data URLs, HTML img tags, CSS backgrounds, Markdown and JSON. Also decode Base64 back to images. Supports batch conversion. No server your images never leave your device.
The TOOLBeans Image to Base64 converter turns any image file PNG, JPG, GIF, WebP, SVG, BMP, ICO or AVIF into a Base64-encoded string that you can paste straight into your code. Instead of linking to a separate image file, a Base64 data URL embeds the whole image inside your HTML, CSS, Markdown or JSON, so the image travels with the document and needs no extra request to load.
Everything runs locally in your browser. When you add an image it is read with the FileReader API and encoded on your own device, so your pictures are never uploaded to a server. That makes the tool fast, private and safe for logos, unreleased assets, screenshots and anything confidential. There is no signup, no watermark and no limit on how many images you convert.
You can output a raw data URL, a Base64-only string, a ready-made HTML img tag, a CSS background rule, Markdown image syntax or a JSON field and for SVG files you can switch to a smaller, human-readable URL-encoded data URI. A built-in decoder reverses the whole process, turning a Base64 string back into a downloadable image.
What Is a Base64 Image and a Data URL?
Base64 is a way of representing binary data using only 64 plain text characters letters, digits and a couple of symbols. Because an image file is binary, encoding it as Base64 produces a long but completely text-safe string that can live inside a text document such as an HTML page, a stylesheet or a JSON payload.
A data URL wraps that Base64 string with a small prefix that tells the browser what it is, for example data:image/png;base64, followed by the encoded data. Anywhere a browser accepts an image URL such as the src of an img tag or the url() of a CSS background you can use a data URL instead of a file path, and the image appears with no separate download.
The trade-off is size. Base64 uses text to represent bytes, which makes the encoded version roughly a third larger than the original file. This tool shows the exact increase for every image, so you can decide whether embedding is worth it for a given picture.
How to Convert an Image to Base64
1
Add your images
Drag and drop one or more images onto the upload area, or click to browse. Each appears in the list with its size and dimensions.
2
Choose an output format
Pick a Data URL, Base64-only string, HTML img tag, CSS background, Markdown or JSON field, depending on where you will paste the result.
3
Set any options
Add alt text and a CSS class for the HTML img output, or a key name for JSON. For SVG files, switch on URL-encoding for a smaller result.
4
Copy or download
Copy the output with one click, or download it as a .txt file. With several images you can download them all in one combined file.
5
Use the quick snippets
In Data URL mode the tool also gives ready-to-paste HTML, CSS and JavaScript snippets for the selected image.
6
Decode when needed
Switch to the Base64 to Image tab to paste a Base64 string or data URL and turn it back into a downloadable image.
Six Output Formats, One Conversion
The same encoded image can be wrapped in whatever form your project needs. Here is when to reach for each one.
Data URL
The full data:image string. Drop it into an img src, a CSS url(), or anywhere a browser expects an image address. The most versatile choice.
Base64 only
Just the encoded characters with no prefix. Use it for API request bodies, database storage, or when your own code adds the data URL prefix.
HTML img tag
A complete img element with your alt text and optional class, ready to paste straight into a web page.
CSS background
A background-image rule with the data URL inside url(), ideal for embedding small icons and textures in a stylesheet.
Markdown
Image syntax for README files, GitHub wikis and other Markdown documents, so the picture is embedded directly in the file.
JSON field
A small JSON object with your chosen key, handy for config files, REST payloads and seed data.
A Smaller Option for SVG: URL-Encoded Data URIs
SVG is a text-based image format, which means it does not have to be turned into Base64 at all. Base64 encoding adds about a third to the size and turns readable markup into an opaque blob. For SVG there is a better choice: a URL-encoded data URI, where only the characters that must be escaped are percent-encoded and the rest of the markup stays as-is.
When you load an SVG, this tool offers a URL-encode toggle. Switch it on and the output becomes a compact data:image/svg+xml, URI that is usually smaller than the Base64 version and remains human-readable, so you can still see and tweak the shapes inside it. It works anywhere a normal data URL works in an img src or a CSS background.
For icons and simple vector graphics this often produces noticeably leaner CSS and HTML, which is why many build tools prefer URL-encoded SVG over Base64.
When Should You Embed Images as Base64?
✅ Small icons and logos
Tiny, frequently used graphics are great candidates. Embedding removes a network request, which can speed up the first render.
✅ Single-file deliverables
When you need one self-contained HTML file, an email template, or a document with no external assets, Base64 keeps everything together.
✅ Inline CSS sprites
Small background textures and UI icons embed cleanly in a stylesheet without extra files to manage.
✅ API and config payloads
Sending a small image inside a JSON request or storing it in a config file is straightforward with Base64.
❌ Large photographs
Big images become very long strings and bloat your HTML or CSS. Normal image files, cached by the browser, are usually faster.
❌ Images reused across pages
A shared file can be cached once and reused; an embedded copy is downloaded again on every page that contains it.
Your Images Stay on Your Device
Many online encoders upload your files to a server to do the conversion. This one does not. The encoding and decoding both happen locally in your browser using standard web APIs, so your images are never transmitted, stored, or seen by anyone else.
That makes it safe for brand assets, client work, screenshots containing sensitive information and anything you would rather not upload. It also means conversion is instant there is no upload wait and it keeps working even if your connection drops after the page has loaded.
Frequently Asked Questions
Is the image to Base64 converter free?+
Yes. It is completely free with no signup and no usage limits, and every feature including batch conversion, the decoder and all output formats is available to everyone.
Are my images uploaded to a server?+
No. Images are read and encoded locally in your browser with the FileReader API, so they never leave your device. That makes the tool safe for private or confidential images.
What image formats can I convert?+
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO and AVIF, up to 10 MB each. You can convert several at once and download them individually or in one combined file.
What output formats are available?+
A raw data URL, a Base64-only string, an HTML img tag, a CSS background rule, Markdown image syntax, or a JSON field. For SVG you can also produce a smaller URL-encoded data URI.
Can I decode Base64 back into an image?+
Yes. Open the Base64 to Image tab, paste a Base64 string or full data URL, and the tool previews the decoded image and lets you download it with one click.
Why is the Base64 string larger than my image file?+
Base64 represents binary data using text characters, which adds roughly 33 percent to the size. The tool shows the exact increase for each image so you can decide whether to embed it.
What is the difference between a data URL and a Base64 string?+
A Base64 string is just the encoded characters. A data URL is that string with a prefix such as data:image/png;base64, that tells the browser how to interpret it, so it can be used directly as an image source.
Why use URL-encoding for SVG instead of Base64?+
SVG is text, so it does not need Base64. A URL-encoded data URI escapes only the necessary characters, which is usually smaller than Base64 and stays readable, while still working in img and CSS.
Is there a size limit?+
Each image can be up to 10 MB. Larger images produce very long strings, so for big photographs a normal image file is often the better choice.
Does the converter work offline?+
Yes. Once the page has loaded, both encoding and decoding run entirely in your browser, so the tool keeps working without an internet connection.