Image to Base64 Converter — Free Online
Convert any image to a Base64 data URL string instantly — ready to embed in HTML, CSS, or JSON. 100% browser-based, your image never leaves your device.
Drop image here or click to upload
JPG, PNG, WebP, HEIC — max 20MB
You can also paste an image (Ctrl+V)
What Is Base64 Encoding for Images?
Base64 is a binary-to-text encoding scheme that converts binary data — like the bytes of an image file — into a string of printable ASCII characters. The name comes from the 64 characters used in the encoding alphabet: A–Z, a–z, 0–9, +, and /. A Base64-encoded image looks like a long string of seemingly random characters starting with something like data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
When used for images, the full Base64 representation is called a data URL. It includes a MIME type prefix (data:image/jpeg;base64,) that tells the browser what kind of data follows. Browsers can load a data URL directly as an image source — no separate HTTP request, no external file.
When to Use Base64 for Images
Inline images in HTML emails
Email clients block external image requests by default. Embedding images as Base64 in HTML emails ensures they display without needing external URLs — no missing image icons, no tracking pixel concerns from the recipient's end.
Small icons and logos in CSS
For small images under 5 KB (favicons, SVG icons, loading spinners), inlining as Base64 in CSS eliminates an extra HTTP request. On fast connections the saving is minor; on slow connections or CDN-constrained origins, each saved request counts.
JSON API responses with embedded images
Some APIs or data formats cannot carry binary data. Base64 allows image data to be embedded in JSON responses, config files, or database text fields without needing a separate file upload or URL reference system.
Offline-first web apps
Progressive web apps that need to function offline can embed critical UI images as Base64 strings in their JavaScript bundle — guaranteeing those images are always available even without a network connection.
Canvas-generated images
When working with the HTML Canvas API, calling canvas.toDataURL() returns a Base64-encoded image. Converting between canvas output and embeddable data URLs is a common step in browser-based image editing.
Testing and prototyping
For rapid UI prototyping or API testing, Base64 strings let you include images without setting up file hosting. Paste the string directly into a src attribute to verify layout without any infrastructure.
Base64 Size Overhead
Base64 encoding increases the size of binary data by approximately 33%. This is because every 3 bytes of binary data become 4 Base64 characters — a 4/3 ratio. The table below shows typical overhead for common image sizes:
| Original image size | Base64 string size | Overhead |
|---|---|---|
| 5 KB (small icon) | ~6.7 KB | +1.7 KB |
| 50 KB (thumbnail) | ~67 KB | +17 KB |
| 200 KB (medium photo) | ~267 KB | +67 KB |
| 1 MB (large photo) | ~1.33 MB | +330 KB |
For images larger than 10 KB, avoid Base64 for web page performance. Base64-encoded images cannot be cached separately by the browser — the entire HTML or CSS file must be re-downloaded whenever anything changes. External image files can be cached independently for much longer periods.
How to Use a Base64 Image String in HTML and CSS
Once you have the Base64 data URL, you can use it anywhere a standard image URL would appear:
In an HTML img tag
<img src="data:image/jpeg;base64,/9j/4AAQ..." alt="Photo" />In CSS background-image
.hero { background-image: url("data:image/jpeg;base64,/9j/4AAQ..."); }In a JSON payload
{ "image": "data:image/jpeg;base64,/9j/4AAQ..." }Your Image Never Leaves Your Device
All encoding runs in your browser using the FileReader API. The image is read and converted to Base64 entirely on your device — no file is uploaded to any server. The Base64 string only exists in your browser memory until you copy or download it.