What this Base64 converter does
Base64 is a way of writing binary data, such as the bytes of a picture, using only plain text characters. This tool works in both directions. Drop an image on the left and you get a ready-to-paste data URI, raw Base64, an HTML image tag, or a CSS background rule. Paste Base64 or a complete data URI on the right and it detects the real image type from the first bytes, shows a preview, and lets you download the file. It also reports the encoded size so you can see the overhead before you embed anything.
When to use it
- Embedding a tiny icon or logo directly in HTML, CSS or an email template, saving an extra network request.
- Sending an image inside a JSON payload for an API or a configuration file.
- Checking what a Base64 string from a log, database or API response actually contains.
- Recovering an image that was pasted as text into a ticket or document.
When Base64 is a good idea, and when it is not
Base64 makes data about 33 percent larger, because every three bytes become four characters. Inline images also cannot be cached separately from the page that contains them. For those reasons, the technique pays off only for very small assets, typically under 10 kilobytes. Larger pictures are better served as normal files, ideally compressed and resized first. If you do need to embed a photo, run it through the compressor beforehand so the encoded string stays manageable.
A few practical details help. A data URI starts with "data:", the media type, and ";base64,", followed by the encoded characters. Spaces and line breaks inside pasted Base64 are ignored, and URL-safe variants that use dashes and underscores are accepted. If the text decodes but is not an image, the tool says so rather than showing a broken picture. Very long strings are shortened in the text box for speed, but the Copy and Download buttons always use the complete value.
Worked example: embedding a small PNG icon
Base64 turns every 3 bytes into 4 characters, rounding up to a whole group, so the length is easy to predict. A 3,000-byte PNG icon becomes exactly 4,000 characters of Base64. The data URI adds the 22-character prefix data:image/png;base64,, for 4,022 characters in total. A 2,000-byte file gives 2,668 characters, and the last one is an = sign used as padding, because 2,000 is not a multiple of 3. That overhead is why Base64 suits tiny icons best: a 300,000-byte photo would turn into 400,000 characters of text inside your page.
Privacy: encoding happens locally
Encoding and decoding both run in your browser with built-in functions. The image or text you provide is not uploaded, and no copy is kept after you close the tab. This matters when the data is a private screenshot, a signature, or an authentication image you would not want to paste into a random website.
Frequently asked questions
What is a Base64 data URI?
It is a string that contains a file inside a web address, in the form data:image/png;base64, followed by the encoded bytes. Browsers can display it directly as an image source.
Why is the Base64 text larger than my image?
Base64 represents three bytes as four characters, so the text is roughly one third bigger than the original file. Compress the image first if size matters.
How do I convert Base64 back to an image?
Paste the string, with or without the data: prefix, into the right-hand box. If it is a valid image you will see a preview and can download it with the right extension.
Which image types are recognised when decoding?
PNG, JPEG, GIF, WebP, BMP, AVIF and SVG are identified from their first bytes, even if the data URI claims a different type.
Is there a size limit?
Files over 25 MB are refused to protect your browser. Files over 5 MB work but you will see a warning, since pages with huge inline strings load slowly.