Image to Base64 Converter

Image to Base64, with the output in the shape you need

Base64 turns a picture file into a long string of plain text, so the image can live inside HTML, CSS, JSON or an email template instead of traveling as a separate file. This tool reads your image exactly as it is and hands back four ready to paste outputs: the full data URI, the raw Base64 string on its own, an HTML img tag with the data URI inside it, and a CSS background line.

The MIME type written into each output is read from the file bytes, not guessed from the file name. A PNG that someone renamed to .jpg still gets the PNG type it actually carries, which saves the broken image icon that a wrong label causes. The panel also states the cost of inlining up front: the encoded text runs about a third bigger than the file itself.

How to convert an image to Base64

1. Drop your image into the box above, or click to pick it from your device. Any format your browser can open works.
2. Check the file size in the list, and remember the encoded text runs about a third bigger.
3. The data URI appears in the panel, with copy buttons for it and for the raw Base64 string. The download holds all four shapes: data URI, raw Base64, HTML img tag and CSS line.
4. Press the copy button for the shape you need, or download the text file with all four.
5. Paste the text into your code, stylesheet, JSON payload or template, and load the page to see the picture render.

Which of the four outputs should you copy

The data URI is the complete package: the word data, the MIME type, a note that the payload is Base64, and the string itself. It goes straight into an img src attribute or a CSS url and the browser renders it without fetching any file. The raw string is what APIs and JSON fields usually want, a payload with no wrapper, ready to sit inside quotes in a request body.

The HTML img tag in the download saves a step when the picture is headed for a web page: the tag is built for you with the data URI in place, so only the alt text needs your words. The CSS line does the same for a background image in a stylesheet. All four outputs hold the same picture data. Only the wrapping differs, and the right wrap is the difference between pasting once and fiddling for ten minutes. Running the trip in reverse, from a string back to a picture file, is the job of the Base64 to Image decoder.

The size math, and what Base64 is not

Base64 writes three bytes of file as four characters of text, so the encoded string is about a third bigger than the image, every time, with no exceptions. A 30 KB icon becomes about 40 KB of text. A 300 KB photo becomes about 400 KB. A 3 MB photo becomes about 4 MB of characters, a wall of text that bloats a page and cannot be cached on its own. Small icons, logos and one-off images are the right candidates. Big photos belong in files.

Two myths deserve plain words. Base64 is not compression: the string is larger than the file it came from, never smaller. And Base64 is not encryption or protection of any kind. It is a public alphabet that every browser and editor can read in both directions, and anyone who can see the string can rebuild the picture in seconds. Never inline an image you would not simply publish.

Private by construction

The file is read by your browser and encoded in this tab. Nothing is uploaded, which matters when the image is an unreleased screenshot, an internal diagram or a client asset. There is no account, no daily cap and no watermark, here or anywhere in the image tools family.