What is an image to Base64 converter?
An image to Base64 converter turns an image file into a line of text, a Base64-encoded data URL, that you can paste directly into HTML, CSS, JSON or source code instead of linking to a separate file. This tool reads your image in the browser and outputs the full data URL, starting with data:image/...;base64,.
Base64 is a way of writing binary data using 64 safe text characters (A–Z, a–z, 0–9, + and /), defined in RFC 4648. The data: URL scheme that wraps it is defined in RFC 2397.
How to convert an image to Base64
- Click Choose File and select an image: PNG, JPG, GIF, WebP, SVG, ICO or another image type.
- Click Convert.
- The data URL appears in the output box and a preview shows underneath. Click Copy.
The browser reads the file with FileReader.readAsDataURL(), which produces the whole string, prefix included, on a single line with no line breaks.
Anatomy of a data URL
Here's the start of the output for a PNG file:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
| Part | Meaning |
|---|---|
data: |
The URL scheme |
image/png |
The media type, taken from the file the browser identified |
;base64 |
The payload is Base64-encoded rather than plain text |
, |
Separator between header and data |
iVBORw0KGgo... |
The file's bytes, encoded |
The first characters give away the format. Every PNG starts with the same 8-byte signature, which encodes to iVBORw0KGgo, and every JPEG starts with bytes that encode to /9j/. If you see data:application/octet-stream, the browser couldn't tell what kind of file it was, usually because of a missing or unusual file extension. Rename the file with the right extension and convert again.
Using the result
In HTML:
<img src="data:image/png;base64,iVBORw0KGgo..." width="16" height="16" alt="Search">
In CSS:
.icon-search {
background-image: url("data:image/png;base64,iVBORw0KGgo...");
}
In JSON or an API payload, many services want only the Base64 part, without the data:image/png;base64, header. Check the API's documentation, and strip the prefix if it asks for "raw Base64".
How big will the string be?
Base64 encodes 3 bytes as 4 characters, so the output grows by a third, rounded up to a multiple of four, plus the prefix:
| File size | Base64 length | With data:image/png;base64, |
|---|---|---|
| 300 bytes | 400 characters | 422 characters |
| 3,000 bytes | 4,000 characters | 4,022 characters |
| 30,000 bytes | 40,000 characters | 40,022 characters |
That overhead is why data URLs suit small images. A 2 KB icon inlined in a stylesheet saves a separate request; a 500 KB photo inlined in a page makes the HTML heavy and can't be cached separately. MDN's data URL page covers the remaining caveats, including that browsers block top-level navigation to data: URLs.
Make the image small first
The tool encodes the file exactly as it is. It doesn't resize, compress or clean it, so a photo straight off a phone keeps its full size and its EXIF data, including any GPS location. Before converting:
- Scale it down with the image resizer to the size it will be displayed.
- Shrink it with the image compressor (JPEG) or the WebP converter. Both also drop EXIF metadata.
For SVG icons, a Base64 data URL works, but a URL-encoded SVG is often shorter because SVG is already text. The URL encoder can prepare one.
To encode text rather than an image, use the Base64 encoder.
Last updated