CodeKitHubWhat Is This Tool?
Base64 is a way to represent binary data — like an image's raw bytes — as plain text, using only letters, digits and a handful of symbols. Because it's plain text, a Base64-encoded image can be embedded directly inside HTML, CSS or JSON instead of being referenced as a separate file.
A "data URL" wraps that Base64 text with a small prefix (data:image/png;base64,) that tells the browser what kind of file it is, so it can be dropped straight into an src or url() attribute and rendered without any extra request.
Why Use It?
- Get both formats at once — the full data URL for HTML/CSS, and the raw Base64 (no prefix) for embedding in JSON or config files.
- No server round-trip: eliminates one HTTP request for small icons, avatars or inline images.
- Preserves the original file bytes exactly — no re-encoding or quality loss, unlike tools that decode and re-save the image.
- Shows the size difference so you know what you're trading for the convenience.
- Private: the file is read locally with the browser's FileReader API and never leaves your device.
How to Use
- Click the upload area or drag an image file onto it.
- Copy the full data URL if you're pasting into an <img src> or CSS background-image.
- Copy the raw Base64 (no data: prefix) if you're embedding the value inside JSON, YAML or another config format that already knows the file type.
- Check the size note — Base64 text is about a third larger than the original binary file.
Example
Input
A 12 KB PNG icon file.Output
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB of text) plus the same string without the data: prefix.The ~33% size increase is inherent to Base64 encoding (3 bytes of binary become 4 characters of text) — it isn't a bug in the tool.
Where each format is used
| Format | Typical use |
|---|---|
| Full data URL | HTML <img src="...">, CSS background-image: url(...), inline email images |
| Raw Base64 | JSON API payloads, YAML/config files, database BLOB fields, custom binary protocols |
Base64 and image size — the trade-off in practice
The ~33% overhead means Base64-embedding is best kept for small assets: a 2 KB icon becomes a harmless ~2.7 KB of inline text, but a 500 KB photo becomes ~665 KB of text sitting inline in your HTML, which slows down parsing and can't be cached separately from the page.
If you're embedding many images or larger ones, weigh the one-request-saved benefit against the page-weight cost — and consider compressing first.
Frequently Asked Questions
Why is the Base64 string so much bigger than my image file?
Base64 encodes every 3 bytes of binary data as 4 text characters, which is a fixed ~33% size overhead. For a 100 KB image, expect roughly 133 KB of Base64 text. This is normal and unavoidable — it's the cost of representing binary data as safe, portable text.
What's the difference between the data URL and the raw Base64 string?
The data URL includes a data:image/png;base64, prefix that tells a browser or renderer what MIME type the following text decodes to. Paste the full data URL into an HTML src or CSS url(). The raw Base64 (everything after the comma) is what you want when a system already knows the file type separately — for example a JSON field like { "format": "png", "data": "<raw base64>" }.
When should I embed an image as Base64 instead of linking to a file?
Base64 embedding is useful for small, frequently-reused images (icons, logos, tiny UI graphics) where saving one HTTP request outweighs the ~33% size penalty, or in contexts where a separate file isn't practical, like inline emails or single-file HTML exports. For large photos or anything reused across many pages, a normal linked file with browser caching is almost always better.
Does converting to Base64 change or compress my image?
No. Base64 is a lossless text encoding of the exact original bytes — it doesn't touch pixels, resolution or compression. If you want a smaller file, compress the image first with an image compressor, then convert the compressed result to Base64.
Is my image uploaded anywhere?
No. The file is read directly in your browser using the FileReader API and encoded locally — it's never sent over the network.