🖼️ 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.

Browsers do technically allow very long data URIs. Chromium-based browsers and Firefox now handle data URLs up to hundreds of megabytes, and Safari (WebKit) allows over a gigabyte, so a modern browser will not usually refuse to render a large embedded image outright. That is different from it being a good idea: a multi-megabyte data URI still bloats your HTML or CSS file, slows down parsing, and cannot be lazy-loaded or cached the way a linked file can, so the practical ceiling for "worth embedding" is far lower than the technical one, generally a few kilobytes to a few tens of kilobytes.

Developers also generate Base64 image strings outside the browser. In Python, base64.b64encode(open("file.png", "rb").read()) turns the raw bytes into the same text this tool produces. In Node.js, Buffer.from(fs.readFileSync("file.png")).toString("base64") does the equivalent, and in browser JavaScript the FileReader API (readAsDataURL) is what powers tools like this one. This matters for build pipelines that inline critical icons at compile time, for APIs that accept an image as a JSON string field, and for CSS-in-JS tooling that embeds small assets automatically.

One detail that trips people up: a data URI embedded in HTML or CSS is subject to the Content-Security-Policy of the page. If a site sets a strict img-src directive without the data: keyword, browsers will silently block the embedded image even though the markup looks correct. Screen readers and accessibility tooling also cannot infer meaning from the Base64 text itself, so an <img> built from a data URI still needs a normal, descriptive alt attribute just like any other image.

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.
• Storing a small thumbnail directly in a database field or API response instead of managing a separate file and URL.
• 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.
5. Need to go the other way? Use a Base64 to Image tool to decode a data URI back into a downloadable 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)

Data URI size limits by browser, and the practical limit to actually aim for

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.
• Dropping the alt attribute. A Base64 string carries no meaning for screen readers. An <img> built from a data URI still needs a normal, descriptive alt attribute; skipping it hurts accessibility exactly as much as skipping alt text on a linked image.
• Blocking data: URIs with a strict Content-Security-Policy. If a page sets a CSP img-src directive without the data: keyword, browsers silently refuse to render embedded images even though the HTML looks correct. Add data: to img-src (and style-src if used in CSS) when you rely on inline images.

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.

Byte

The basic unit of binary data, 8 bits. Base64 groups bytes in sets of 3 and turns each group into 4 text characters, which is the source of the 33% size increase.

Content Security Policy (CSP)

A browser security header that can restrict where images, scripts and styles may load from; it must include data: in img-src for embedded Base64 images to render.

Base64url

A URL-safe variant of Base64 that replaces + and / with - and _ and often drops padding, used in things like JWTs and URL query parameters rather than in image data URIs.

Frequently asked questions