Convert an Image to Base64

Base64 turns an image into plain text, so it can live inside the HTML, CSS, JSON or email that uses it. No separate file, no broken image link, no extra HTTP request. It is how icons get embedded in stylesheets, images travel through JSON APIs and logos appear in HTML emails.

This free encoder converts PNG, JPG, WebP, SVG, GIF and BMP images to Base64 in your browser. Copy the result as raw Base64, a data URI, a ready-made HTML image tag or a CSS background rule, or download it as a text file. The image is never uploaded.

How to Convert an Image to Base64 in 3 Steps

1. 1

   Add the image

   Drop a PNG, JPG, WebP, SVG, GIF or BMP image (up to 15 MB) into the encoder above. The file encoder is already open.

2. 2

   Pick the output

   Choose raw Base64, a data URI, an HTML <img> tag or a CSS background-image rule.

3. 3

   Copy or download

   Copy the text to the clipboard or download it as a .txt file, then paste it into your code.

Which Output Format Do You Need?

How Base64 Encoding Works

Images are binary data, and many formats (HTML attributes, CSS, JSON, email headers) only carry text safely. Base64 maps every 3 bytes of the file to 4 characters from a 64-character alphabet (A–Z, a–z, 0–9, + and /), with = padding at the end. The result is longer but survives anywhere text does.

The encoding is exact: no pixels are touched and no quality is lost. We encoded a real 34.7 KB JPEG, decoded the 46.3 KB of text, and got the identical file back.

Raw Base64, Data URI, HTML or CSS

The encoder offers four wrappers around the same data, so you can paste it directly where it belongs:

• Raw Base64: just the encoded text, for JSON fields, APIs and databases that store the type separately.
• Data URI: data:image/png;base64,…, usable wherever a URL is expected, such as src attributes, Markdown and JavaScript.
• HTML: a complete <img> tag with the data URI, ready for email templates or a quick test page.
• CSS: a background-image: url("data:…") rule for icons and patterns in stylesheets.

When Base64 Images Help, and When They Hurt

Embedding saves a network request, which matters for tiny images on fast connections and for documents that must be self-contained. It hurts for larger images: the data grows by a third, it cannot be cached separately from the page or stylesheet, and the browser cannot start decoding it until the surrounding file arrives.

• Good: icons and logos under about 10 KB, loading placeholders, HTML emails, single-file reports, test fixtures.
• Usually bad: photos, hero images, anything reused on many pages (a normal file is cached once).
• Make it smaller first: resize the image, compress it with Compress Image to 10KB or convert it with PNG to WebP before encoding.

Correct MIME Types Every Time

A data URI is only displayed if its type prefix is right. Browsers usually report the type of a selected file, but for some formats, such as HEIC and AVIF on Windows, they report nothing. In that case the encoder reads the first bytes of the file to identify it, so you still get data:image/avif;base64,… rather than an unusable application/octet-stream.

Files up to 15 MB can be encoded. Larger files produce text tens of megabytes long, which slows the page and is impractical to paste anywhere; compress or resize them first.

Code Snippets for Developers

Below the encoder, the developer panel shows ready-to-copy snippets for JavaScript, Node.js, Python, PHP, Java, Go and more, with your own data filled in. Together with the HTML and CSS outputs, it is a quick way to check the exact syntax without leaving the page.

Private, Offline-Capable Encoding

The file is read with the browser's FileReader and encoded on your device. Nothing is uploaded or logged. Once the page has loaded, encoding works even without an internet connection.

Where to Paste the Result

Each destination expects a slightly different form of the same data:

• HTML: <img src="data:image/png;base64,…" alt="…">; always keep a meaningful alt text.
• CSS: .icon { background-image: url("data:image/svg+xml;base64,…"); }.
• Markdown: ![logo](data:image/png;base64,…); some renderers (GitHub among them) do not display data URIs, so test first.
• JSON APIs: usually raw Base64 in a string field, with the type sent separately; check the API documentation.
• Email: data URIs work in many but not all email clients; Outlook on Windows is the usual exception, so test before sending a campaign.

Base64 Is Not Encryption

Base64 makes binary data safe to transport as text; it does not hide it. Anyone can decode a Base64 image in seconds, for example with Base64 to Image. Do not use it to protect private images, and remember that an image embedded in a public page or email is as visible as any other image.

How Long Will the Base64 Text Be?

Base64 length is predictable: about 4 characters for every 3 bytes, plus the short data:image/…;base64, prefix. A 3 KB icon becomes about 4 KB of text, a 10 KB logo about 13.3 KB, and a 100 KB photo about 133 KB, which is already too long to paste comfortably into most code editors or CMS fields. That is the practical reason to keep embedded images small and to optimise them before encoding rather than after.

Who Uses This and Why

Frequently Asked Questions

Related Free Tools