What This Tool Does
This bidirectional converter turns image files into Base64-encoded data URIs (ready to paste into HTML, CSS, or JSON), and decodes Base64 strings back into viewable, downloadable images. Useful for embedding small images in emails, inlining CSS background images, or working with image APIs that return Base64 strings.
Inputs Explained
- Mode: Image → Base64, or Base64 → Image.
- File / Text: Upload image or paste Base64 data URI.
- Output Type: Data URI (with MIME prefix) or raw Base64 (no prefix).
How It Works
Encoding: FileReader.readAsDataURL converts the uploaded image into a data URI like 'data:image/png;base64,iVBOR...'. Decoding: the tool parses the MIME type from the prefix, decodes the Base64 to bytes, and creates a Blob for display and download.
Formula / Logic Used
Image to Base64 & Base64 to Image
Convert images to Base64 data URIs for inline HTML/CSS — or decode Base64 back to images.
Step-by-Step Example
Encoded Base64 data URI for a tiny red pixel PNG:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Usage in HTML: <img src="data:image/png;base64,iVBOR...">
Usage in CSS: background: url('data:image/png;base64,iVBOR...');
Decoding the above returns a 1×1 red pixel PNG image.
Use Cases
- Inline CSS backgrounds: Embed small icons directly in CSS to eliminate extra HTTP requests.
- Email templates: Some email clients strip external images — Base64 embedding ensures images always display.
- JSON API responses: Include images in API payloads that only support text (JSON doesn't have binary type).
- Single-file HTML: Embed all assets in one HTML file for portability (no external dependencies).
- Debug image APIs: Preview what Base64-encoded images from APIs actually contain.
Assumptions and Limitations
- Base64 encoding increases file size by about 33% — avoid embedding large images (use sparingly, typically under 10 KB).
- Browsers don't cache inline Base64 images separately. If the same image appears on many pages, use a file URL for better caching.
- Very long Base64 strings can slow page parsing. Modern best practice: Base64 only for icons/sprites under 2 KB.
- Some email clients limit total HTML size — too many Base64 images may cause the email to be truncated or flagged as spam.
Frequently Asked Questions
What is Base64 encoding?
Base64 encodes binary data (like image bytes) as text using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). This lets binary data travel through text-only channels like JSON, XML, email, or source code.
Why is Base64 output 33% larger than the original file?
Base64 uses 4 characters to represent 3 bytes of binary data, so output is exactly 4/3 = 1.33× the input size. This overhead is the tradeoff for being able to include binary in text formats.
When should I use Base64 images?
Use for very small icons (< 2 KB), single-file HTML demos, email templates needing guaranteed display, and JSON API payloads. Avoid for large images or photos — use regular file URLs which cache better.
What's a data URI?
A data URI is a URL starting with 'data:' that contains the actual data inline. Format: 'data:MIME;base64,BASE64DATA'. Browsers treat them like any other URL but the data is in the URI itself, not fetched separately.
Can I decode any Base64 string?
Yes, but the result is only an image if the Base64 encodes image bytes. If you paste Base64 of plain text or other data, decoding produces that data, which won't display as an image. The tool defaults to PNG MIME when no prefix is given.
Does Base64 compress the image?
No — Base64 actually makes the file larger (by 33%). It's an encoding, not compression. Compress your image first (JPG/WebP), then Base64-encode if needed for inline embedding.
Will Base64 images work in email?
Mostly yes. Gmail, Outlook (most versions), and Apple Mail support data URIs in HTML emails. Gmail has a 102 KB email size limit though, so keep total Base64 weight modest.
Is my image uploaded?
No. All encoding/decoding happens in your browser using FileReader and native atob/btoa functions. Your image and Base64 strings never leave your device.
Sources and References
- RFC 4648 — Base64 Encoding — Official Base64 specification.
- MDN — Data URLs — Browser documentation for data URI scheme.
- MDN — FileReader.readAsDataURL — Browser API used for encoding.
- web.dev — Embedding Images — Best practices for image embedding on the web.