Free Image to Base64 Converter
Encode any image as a Base64 data URI for CSS, HTML and JSON. Five copy-ready output formats with size comparison — all in your browser, nothing uploaded.
Your Image
Base64 Output
Upload an image to see the Base64 output
What Is Base64 Encoding?
Base64 is a way of representing binary data (like images) using only 64 printable ASCII characters: A–Z, a–z, 0–9, + and /. It was invented to safely transmit binary data over systems that were designed for text — email, XML, JSON, HTML attributes and CSS values.
When you encode an image as Base64, you get a long string of characters that contains the entire image. You can paste that string directly into your HTML, CSS or JSON, and the browser will decode and display it as if it were a real image file.
Base64 data URI syntax
A complete data URI has four parts:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==data:— declares it as a data URIimage/png— the MIME type of the decoded data;base64— the encoding method (Base64)iVBORw0KG…— the actual Base64-encoded image data
The size penalty — and when it's worth it
Base64 increases file size by roughly 33% because every 3 bytes of binary data becomes 4 ASCII characters. A 10 KB image becomes ~13.3 KB of Base64 text.
So why use it at all?
| Benefit | When it wins |
|---|---|
| Saves an HTTP request | Small icons repeated across many pages |
| Works without a server | Single-file HTML documents, offline HTML |
| Bypasses hotlink protection | Embedding images in emails or CMS content |
| No separate file to manage | Small decorative CSS backgrounds and bullets |
| Bypasses CSP image-src blocks | Some strict Content Security Policy setups |
Rule of thumb: use Base64 for images under ~10 KB that appear on many pages. For anything larger, a separate file with caching is faster.
When NOT to use Base64
- Large images. A 200 KB hero photo becomes 266 KB of Base64 in your HTML — and it can't be cached, so every page load re-downloads it.
- Images that change often. Changing the image means editing the HTML/CSS file and invalidating the entire page's cache.
- Images repeated across pages. A single file is downloaded once and cached; Base64 is re-downloaded every time.
- Photos and product galleries. Always use separate files.
- Progressive loading matters. Base64 images block the containing file's parse — they can't stream in.
The five output formats explained
| Format | Output example | Use case |
|---|---|---|
| Data URI | data:image/png;base64,… | Generic — paste anywhere a URL is expected |
| Raw Base64 | iVBORw0KG… | You'll add the prefix yourself, or send via API |
| CSS | background-image: url('data:…'); | Decorative icons, bullets, background patterns |
| HTML | <img src="data:…" alt=""> | Email templates, single-file HTML pages |
| JSON | {"image": "data:…"} | API payloads, config files, data interchange |
| Markdown |  | READMEs, wikis, documentation |
Common use cases
HTML Email Templates
Many email clients block external images. Base64 embeds them inline.
CSS Icons & Bullets
Embed small icons directly in CSS as background images.
Single-file HTML
Create portable HTML documents with embedded images — no folder structure needed.
API Payloads
Send images inside JSON POST requests without multipart uploads.
CSP-Friendly Embeds
Bypass image-src Content Security Policy blocks in strict environments.
Database Storage
Store small images as text in SQLite, Postgres or Firebase.
Critical Above-the-fold
Inline a hero icon to eliminate its network round-trip.
Quick Prototypes
Get a working demo running without setting up file hosting.
Privacy and security
This image to Base64 converter runs entirely in your browser using the standard FileReader.readAsDataURL() API. Your image is never uploaded, never stored, and never transmitted to any server. The processing happens on your device, which means the tool works offline once the page has loaded. Safe for private photos, client assets, API credentials and confidential material.
Frequently Asked Questions
What is Base64 encoding?
What is a data URI?
data:image/png;base64,iVBORw0KGgo…. The first part declares the MIME type and encoding, and the rest is the Base64-encoded file contents. Browsers treat data URIs exactly like regular image URLs.Does Base64 make files bigger?
When should I use Base64 images?
What's the maximum size for Base64 images?
Can I use Base64 images in CSS?
background-image: url('data:image/png;base64,…'). This is very common for small decorative icons and bullet points. Our tool generates the full CSS rule ready to paste.Can I use Base64 images in HTML?
<img src="data:image/png;base64,…" alt="…">. The browser decodes and displays it exactly like a normal image. Useful for tiny inline icons, email templates and single-file HTML documents.