What you get
The converter reads your image in the browser and encodes its bytes as Base64. You can copy the result in the format you need:
| Format | Looks like | Use it in |
|---|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo... | Any place that takes a URL: src, href, CSS url(). |
| Raw Base64 | iVBORw0KGgo... | JSON APIs, databases, code that adds its own prefix. |
| HTML img tag | <img src="data:..." width height> | HTML pages and templates, with the real width and height. |
| CSS background | background-image: url("data:..."); | Stylesheets and small icons. |
| Markdown |  | Markdown editors that support data URIs. |
| JSON | {"filename":...,"mime":...,"base64":...} | API requests that carry a file. |
When to inline an image as Base64
Base64 makes an image about 33% larger, and an inlined image cannot be cached on its own, because it is part of the page or the stylesheet that contains it. Inline when:
- the image is very small (a few KB): icons, logos, 1 pixel placeholders, blurred previews;
- you must send a single file with no extra requests: HTML emails (some mail clients block data URIs, so test), offline pages, bug reports;
- an API accepts images only as text in JSON.
For larger pictures, serve the file normally, and make it smaller first with the image compressor or the image resizer. The tool warns you when an image is larger than 20 KB.
SVG tip
SVG is text, so it does not need Base64. A URL-encoded SVG in a data URI is usually smaller than a Base64 one and compresses better with gzip. Use the URL encoder for this. Base64 still works well when you want to avoid quoting problems.
Supported images
Any file your browser can read, up to 5 MB: PNG, JPG, GIF, WebP, AVIF, BMP, ICO and SVG. The MIME type in the data URI comes from the file. The width and height are read from the image itself.
Do it in code
// JavaScript (browser)
const r = new FileReader();
r.onload = () => console.log(r.result); // "data:image/png;base64,..."
r.readAsDataURL(file);
// PHP
$data = 'data:image/png;base64,' . base64_encode(file_get_contents('logo.png'));
# Python
import base64
b64 = base64.b64encode(open('logo.png', 'rb').read()).decode()
# Shell
base64 -w 0 logo.png
Privacy
The image is read by your browser and converted on your device. It is not uploaded.
To go the other way, use Base64 to image. See also the Base64 encoder for any file and the guide What is Base64?