Image to Base64 Converter
Encode a picture as Base64 text you can paste into HTML, CSS, JSON or an email template. Choose the output format, copy the result and see how much bigger the text is than the file.
🔒 Runs in your browser. Your files and text are not uploaded.
How to use the Image to Base64
- Drop one or more images on the box, or click it to choose files. Files up to 8 MB are accepted.
- Choose Output as: data URI, Base64 text only, an HTML img tag, a CSS background-image rule or a Markdown image.
- Press the copy button next to the result, or select the text and copy it.
- Paste it where you need it, for example into your HTML file or a JSON field.
What a Base64 image is
Base64 turns binary data into plain text made of 64 safe characters (A–Z, a–z, 0–9, + and /). A data URI wraps that text with the file type, for example data:image/png;base64,iVBORw0KGgo…, so the browser can show the picture without fetching a separate file. That lets you put a small image directly inside an HTML page, a stylesheet, an email, a JSON response or a single-file document.
Output formats explained
| Format | Looks like | Use it for |
|---|---|---|
| Data URI | data:image/png;base64,… | The src of an image, the url() of a CSS rule, JSON fields |
| Base64 text only | iVBORw0KGgo… | APIs and databases that expect the raw string |
| HTML <img> tag | <img src="data:…" alt=""> | Pasting an inline image into a page or an email template |
| CSS background-image | background-image:url(data:…) | Small decorative backgrounds in a stylesheet |
| Markdown image |  | Documents and notes that support embedded images |
When to use Base64, and when not to
Base64 saves one network request, which helps for a handful of tiny images such as icons, bullets or a placeholder. It also keeps a document self-contained. The cost is size: Base64 text is about one third larger than the file (4 characters for every 3 bytes), and an embedded picture cannot be cached separately, loaded lazily or reused across pages. As a rule, embed only files under about 10 KB. For anything larger, a normal image file is better, and for photos it is much better.
- Good: small logos, icons, one-colour backgrounds, email signatures, test fixtures, and single-file HTML demos.
- Poor: hero images and photos, galleries, and any image shown on many pages.
- Tip: shrink the picture first with the image compressor or convert it to WebP, because every byte is multiplied by 1.33 in the text.
- Note: some email programs block data URI images, and a strict Content-Security-Policy may need
img-src data:.
Getting the image back
If you have a Base64 string and need the picture, paste it into the Base64 to Image decoder. It detects JPEG, PNG, WebP, GIF, BMP and SVG automatically, whether or not the string has the data URI prefix.
Frequently asked questions
How do I convert an image to Base64?
Drop the picture on the box and pick the output format. The Base64 text appears below, ready to copy.
Why is the Base64 text bigger than my file?
Base64 represents 3 bytes with 4 characters, so the text is about 33% larger than the original file.
What is a data URI?
A web address that contains the file itself, in the form data:image/png;base64, followed by the encoded data. Browsers can display it like any other image address.
Is there a size limit?
The tool accepts files up to 8 MB, but very long strings are unwieldy. Keep embedded pictures small, ideally below 10 KB.
Is my image uploaded?
No. The image is read and encoded in your browser.