Image to Base64 Converter
Encode an image as a Base64 data URI for embedding in HTML, CSS or JSON, or paste Base64 to preview and download the image it contains — all in your browser.
What is an image data URI?
A data URI puts a whole file inside a URL, so an image can be embedded in HTML, CSS or JSON instead of being fetched separately. The format is defined in RFC 2397 and, as browsers actually parse it, in the WHATWG Fetch standard:
data:[<MIME type>][;base64],<data>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADAQMAAABs5if8...Binary images have to be Base64-encoded to fit in text, which turns every 3 bytes into 4 characters. This tool does that with the browser’s FileReader API, and also works in reverse: paste a data URI or bare Base64 and it shows the image and lets you save it.
How to use the tool
Image → Base64
- Click the upload box or drag an image onto it. Any file your browser reports as an image is accepted, including PNG, JPG, GIF, WebP, SVG and AVIF.
- The complete data URI appears in the text box, with a preview. The box label shows the file name and the size of the encoded text.
- Click Copy, or Download .txt to save it as
image-base64.txt. Clear empties this panel.
Base64 → Image
- Paste a full
data:image/…URI, or just the Base64 part, into the lower box. - If you pasted bare Base64, choose its MIME type: PNG, JPEG, GIF, SVG or WebP. The setting is ignored when the text starts with
data:. - Click Show Image. If it decodes, a preview and a Download image button appear; the file is named
image.png,image.jpeg,image.svgand so on, after the MIME type.
Verified example
A 3 × 3 pixel PNG of 312 bytes produced a data URI of 438 characters: 22 for the data:image/png;base64, prefix and 416 of Base64 (312 ÷ 3 × 4). The same rule lets you estimate any image: a 30 KB file becomes about 40 KB of text.
Using a data URI
It works anywhere a URL is expected:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo" width="32" height="32">
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgo...");
}
{ "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." }The cost of embedding
Inlining removes a request, but it is not free:
- Size: the image grows by about a third. Gzip or Brotli on the HTML or CSS wins some of that back, but rarely all of it.
- Caching: the image is re-downloaded whenever the page or stylesheet containing it changes, and cannot be shared between pages as a separate cached file.
- Loading: a large data URI in CSS delays rendering, because the browser must download the whole stylesheet first. Inline images also cannot be lazy-loaded independently.
Good fits are small icons and placeholders of a few kilobytes, single-file HTML reports, test fixtures, and API payloads that must carry an image as text. Photos and larger images are better served as separate files. For HTML email, support for data URIs varies between mail clients, so test before relying on them.
SVG: you may not need Base64
SVG is already text, so it can go into a data URI percent-encoded rather than Base64-encoded. For a small circle icon, the Base64 version was 178 characters and this one 146:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23e11d48'/%3E%3C/svg%3ESwap double quotes for single quotes and encode <, >, # and %; the URL Encoder can help. The lower box of this tool previews such URIs too.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| “Could not decode this as an image” | The Base64 is truncated, contains stray characters, or is not an image at all. | Copy the full value again; remove surrounding quotes, JSON or a url(…) wrapper. |
| Same error with URL-safe input | The string uses - and _ (Base64url), which data URIs do not accept. | Replace - with + and _ with /, or convert it in the Base64 decoder. |
| Preview works but the download has the wrong extension | The declared MIME type is wrong. Chromium detects the real format for display, but the file name follows the MIME type. | Pick the correct MIME type, or fix the data: prefix. |
| Choosing a file does nothing | The file is not an image; the box label says so. | Convert it with the Image Converter first if it is an image in an unsupported format. |
Frequently asked questions
Are my images uploaded?
No. The file is read by your browser’s FileReader API and decoding happens on your device too. Nothing you choose or paste is sent anywhere by the tool.
Is Base64 a form of encryption?
No. It is an encoding that anyone can reverse instantly. An image inside a data URI is as public as the page or file that contains it.
What is the largest image I can convert?
The tool sets no limit of its own. In practice, strings of several megabytes make the text box, your editor and any page that embeds them sluggish, so large images are better kept as files.
Should I shrink the image before encoding it?
Yes. Base64 adds a third to whatever you give it, so resize and compress first — for example to WebP in the Image Converter — and encode the smaller file.
How do I use the Base64 in a JSON API?
Send either the full data URI or only the part after the comma, with the MIME type in a separate field. Agree which one with the receiving system; many APIs expect bare Base64.