Image to Base64

How to convert an image to Base64

1. Drop one or more images onto the box, or click to browse. Each file gets its own panel with a thumbnail, file name, original size and a text area holding the encoded result.
2. Choose Output. “Full data URI” includes the data:image/png;base64, prefix and works anywhere a URL is accepted. “Raw Base64 only” gives just the encoded characters, for APIs, JSON fields and databases that want no prefix.
3. Choose Wrap as. “Plain string” follows your Output setting. “CSS background” gives background-image: url(...); and “HTML <img>” gives a complete image tag with an empty alt attribute. The two wrapped formats always use the full data URI, because they need the prefix to work.
4. Click Copy and paste the result into your code, template or configuration.

What Base64 and a data URI really are

Base64 is a way to write binary data using only 64 safe text characters (letters, digits, plus and slash). A data URI wraps that text with a label saying what it is: data:image/png;base64,iVBORw0KGgo.... Browsers treat it like a normal image address, but the picture is inside the text itself, so no extra request goes to a server. The tool encodes your original file exactly as it is, byte for byte; it does not resize, recompress or change the image in any way. The MIME type in the prefix comes from the file type your browser reports.

When it is a good idea

• Tiny icons and logos in a stylesheet. A 1 KB icon embedded in CSS saves a request and cannot arrive late or fail to load.
• Single-file HTML. Reports, offline documents and demo pages that must work from one file with no folder of assets.
• Email templates. Some clients block linked images by default, although support for inline data URIs in email is inconsistent, so test in the clients that matter to you.
• JSON and API payloads. Sending a small image inside a request body as raw Base64, for example an avatar or a signature.
• Placeholders. A very small blurred preview inlined into a page while the full image loads.

When to avoid it

Base64 turns every 3 bytes into 4 characters, so the text is about one third larger than the file. A 300 KB photo becomes roughly 400 KB of text that must be downloaded with the page and cannot be cached on its own, so it is downloaded again whenever the containing HTML or CSS is fetched again. Large inline images also delay rendering because the browser must parse the whole string. As a rule of thumb, keep embedded images below a few kilobytes and serve anything bigger as a normal file. If you only need smaller files, run the picture through the image compressor or the image resizer before encoding. To go the other way and turn a string back into a picture, see how to decode a Base64 image.

Common mistakes

• Pasting raw Base64 where a data URI is needed. An src attribute needs the full prefix. Without it the image shows as broken.
• Including the prefix in an API field. Many APIs want raw Base64 only. Switch Output to raw for those.
• Line breaks inside the string. The result is one continuous line. If a text editor wraps it for display that is fine, but do not insert real line breaks.
• Encoding SVG when you do not need to. SVG is already text, and it can often be placed directly in HTML, which is smaller than its Base64 version.

Is it private and safe?

Yes. The file is read by your browser and encoded locally, and it is never uploaded. Be aware that Base64 is an encoding, not encryption: anyone who has the string can recover the image, so do not treat it as a way to hide anything. Very large images produce very long strings that can slow down the text area or your editor.

Related guides

Go deeper: How to convert an image to Base64, using Base64 images in HTML and CSS, the size overhead of Base64 images and Base64 images in email. For text rather than images, try Base64 Text Encoder.