Image ↔ Base64 Converter

Convert images to Base64 data URIs and back, with drag-and-drop upload and instant preview.

Client-side

About this tool

The Image ↔ Base64 Converter embeds images directly into text — as a Base64-encoded data URI — and reverses the process, turning a data URI or raw Base64 string back into a downloadable image. Data URIs let you inline small images directly into HTML, CSS, JSON, or JavaScript without a separate file request, common for icons, email templates, and CSS background images.

Drag and drop an image (or use the file picker) and the tool reads it locally using the browser's FileReader API, shows an instant preview, and gives you the resulting Base64 string as either the full data URI (data:image/png;base64,...) ready to paste into an src or CSS url(), or the raw Base64 payload alone. File size is shown so you can judge whether inlining is appropriate — Base64 encoding inflates size by roughly 33%.

The reverse direction accepts either a full data URI or a bare Base64 string, renders a live preview so you can confirm it decoded correctly, and provides a one-click download link to save the reconstructed image file.

The entire conversion happens in your browser — the image is never uploaded anywhere.

FAQ

Does this upload my image to a server?

No. The image is read entirely in your browser using the FileReader API and converted to Base64 locally. Open your Network panel while using this tool — you will see no outbound requests carrying your image data.

Why is the Base64 output so much longer than the original file?

Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters, an overhead of about 33%. A 100 KB image becomes roughly 133 KB of Base64 text.

What's the difference between the full data URI and base64-only output?

The full data URI is ready to paste directly into an HTML img src or CSS url(). The base64-only output is just the encoded payload — use it when you need to store or transmit the data separately.

Is it a good idea to inline large images as Base64?

Generally no. Base64 data URIs bypass normal HTTP caching and increase payload size by ~33%. They work well for small icons and thumbnails, but standalone image files are usually better for anything larger.

Can I convert any image format?

Yes. The tool accepts any file with an image/* MIME type and preserves the original format in the data URI header, so the decoded output matches the original file format exactly.