🖼️ Image to Base64 Converter

What is the Image to Base64?

Base64 is a way of writing binary data (like the bytes of an image) using only 64 plain text characters: A to Z, a to z, 0 to 9, plus + and /. Because the result is ordinary text, it can live anywhere text is allowed, including inside an HTML or CSS file. A data URI wraps that text in a small header so a browser knows what it is decoding. The format is data:[media type];base64,[the Base64 text], for example data:image/png;base64,iVBORw0KGgo… The browser reads the media type, decodes the Base64 back into the original bytes, and draws the image, exactly as if it had downloaded a separate file.

The main reason to embed an image this way is to avoid a separate network request. A normal <img src="logo.png"> makes the browser fetch logo.png as its own download. A small icon, spinner or background pattern embedded as a data URI travels inside the HTML or CSS that already loaded, so there is one less round trip. This can speed up the first paint for tiny, critical images, and it is handy for self-contained files such as email templates, single-file HTML pages, bookmarklets and offline demos where you cannot rely on external assets being present.

The trade-off is size. Base64 represents every 3 bytes of the original using 4 text characters, so the encoded string is about 33% to 37% larger than the file once you add the data URI header and any padding. Embedded images also cannot be cached separately by the browser: the same icon repeated across ten pages is downloaded ten times instead of once. For these reasons Base64 embedding suits small images (rules of thumb often cap it around a few kilobytes); large photos are almost always better left as normal linked files.

When to use it

• Embedding a small logo, icon or spinner directly in an HTML email so it shows without an external image host.
• Inlining a tiny background pattern or icon in CSS to remove an extra HTTP request and speed up first paint.
• Building a single self-contained HTML file (a demo, report or offline page) that carries its images inside it.
• Pasting an image into a JSON payload, a JavaScript string, or a Markdown file that does not support file attachments.
• Quickly inspecting or sharing an image as text when you cannot attach a binary file.

How to use the Image to Base64

1. Click Choose an image and pick a PNG, JPG, GIF, WebP, SVG, BMP or ICO file from your device.
2. Wait a moment while the file is read in your browser (nothing is uploaded).
3. Copy the Base64 data URI from the first box, or copy the ready-made <img> tag or CSS background snippet.
4. Paste the snippet into your HTML, CSS, email template or other file.

Formula & method

Worked examples

Common image media types used in the data URI header

Roughly how Base64 grows a file (data URI header not included)

Common mistakes to avoid

• Embedding large photos as Base64. A data URI is about a third larger than the file and cannot be cached separately, so inlining a big photo bloats your HTML or CSS and is downloaded fresh on every page. Keep embedding for small images (a few kilobytes) and link large ones normally.
• Forgetting the data: prefix when pasting. The raw Base64 string on its own is not enough. Browsers only render it when it begins with the full data:image/…;base64, header. Copy the whole data URI box, not just the characters after the comma.
• Adding line breaks inside the string. A data URI must be one continuous string. If your editor wraps or inserts newlines into the value of src or url(), the image may fail to load. Keep it on a single line.
• Using the wrong media type. If you relabel a JPEG as image/png, some browsers still cope but others refuse to render it. The media type should match the actual format; this tool sets it from the file you choose.

Glossary

Base64

An encoding that represents binary data using 64 text characters (A–Z, a–z, 0–9, + and /), so binary can be stored or transmitted as plain text.

Data URI

A URL beginning with data: that contains the file content inline, in the form data:<media-type>;base64,<data>, instead of pointing to a separate file.

Media type (MIME type)

A label such as image/png or image/svg+xml that tells the browser what kind of data follows so it can decode and display it correctly.

Padding

One or two = characters added to the end of a Base64 string so its length is a multiple of four.

FileReader

A browser API that reads a chosen file into memory, here as a Base64 data URL, entirely on your device.

Frequently asked questions