Image to Base64
Base64 encodes binary image bytes as ASCII text you can paste into HTML img src, CSS url(), or JSON payloads. Useful for tiny icons, data URIs in prototypes, and APIs that expect inline images. Encoding happens locally — nothing is uploaded.
How to encode an image to Base64
1. Upload the image file (keep it small — under ~100 KB is practical).
2. Copy the generated Base64 string or full data URL.
3. Paste into your HTML, CSS, or config.
4. Test in the target environment — some email clients limit data URIs.
Encoding examples
Inline logo in HTML email
A 2 KB PNG logo as data:image/png;base64,... avoids external image blocking in strict corporate inboxes.
CSS background for prototype
Paste a Base64 texture into a single-file demo without asset hosting.
API test fixture
Include a tiny Base64 JPEG in a JSON request body for image upload endpoint testing.
When Base64 images help
• For very small assets where one HTTP request costs more than inline size overhead.
• For offline single-file HTML prototypes.
• When external hosting is unavailable in locked-down environments.
When to avoid Base64 images
• For large photos — Base64 grows ~33% and bloats HTML cache.
• When CDN caching and responsive srcset are available.
• When many email clients block data URIs — use hosted images instead.
Base64 in performance budgets
Inlining removes round trips but prevents browser caching of the image separately. Use for critical tiny icons above the fold sparingly; lazy-load large media normally.
Email client quirks
Outlook desktop has historically limited data URI support. Test Gmail, Apple Mail, and Outlook before relying on inline images in campaigns.
Security
Do not paste untrusted Base64 into pages without understanding content — it is still executable context in HTML. Encode only your own assets.
Frequently asked questions
Why is Base64 larger than the file?
Encoding uses 4 characters for every 3 bytes — roughly 33% overhead plus the data URL prefix.
What is a data URL?
Format: data:image/png;base64,iVBORw0KG... — MIME type plus encoded payload.
Max size for email?
Keep under 10–20 KB total message growth; many clients choke on huge inline images.
Decode back to file?
Use the Base64 encoder/decoder tool to reverse ASCII to binary if needed.
Are images uploaded?
No — FileReader reads locally in the browser.
SVG to Base64?
Possible for small SVG text; raster formats are more common for data URIs.