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.
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.
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.
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.
SVG to Base64?
Possible for small SVG text; raster formats are more common for data URIs.