Image to Base64

What this image to Base64 converter does

Select an image file to convert image to Base64 as a data URL you can paste directly into an img src attribute, a CSS url(), or a JSON field. It's a free image to Base64 online converter that supports PNG, JPG, GIF, SVG, and WebP — no login, nothing stored on our servers.

Why the upload limit is 5 MB and not something rounder

The limit isn't arbitrary — it's sized around Base64's inherent inflation. Base64 encoding increases data size by exactly 4/3 (about 33%): every 3 bytes of binary input become 4 characters of ASCII output. A 5 MB image becomes roughly 6.7 MB of Base64 text. The Blazor Server connection has an explicit 10 MB maximum receive message size (configured in Program.cs). A 5 MB ceiling on the input keeps the encoded output well inside that limit, leaving headroom for the SignalR protocol overhead wrapping the payload. Push a 7.5 MB image, and the raw Base64 output alone would hit approximately 10 MB — brushing against the connection limit and potentially causing a circuit error even before any protocol overhead is accounted for. The 5 MB cap is where the math stops being comfortable.

Also relevant to the privacy question: this site runs on Blazor Server, so the file you select is streamed over your existing live connection to the server and encoded there with Convert.ToBase64String. It's not a client-side-only conversion. The bytes are processed in memory for that one request and never written to disk or logged — but "never leaves your device" would be inaccurate to claim, and the existing FAQ on this page says so directly.

What is a data URL?

A data URL is a URI scheme that encodes file content inline. Its format is data:[mediatype];base64,[data]. For example, a small PNG icon becomes data:image/png;base64,iVBORw0KGgo.... This string can be used anywhere a regular URL can: in an <img src="..."> attribute, a CSS background-image: url(...) value, or a JSON field in an API payload. The browser decodes the Base64, recovers the binary image data, and renders it exactly as it would a hosted image file.

How to use this tool

1. Click Choose File and select an image (PNG, JPG, GIF, SVG, WebP, or any browser-displayable format).
2. The Base64 data URL is generated automatically and displayed in the output.
3. Copy the full data URL string.
4. Paste it directly into an img src attribute, CSS url(), or any other context that accepts a URL.

When to use inline Base64 images

Base64 encoding increases data size by approximately 33% compared to the original binary file. This tradeoff is only worthwhile for small images where the saved HTTP request outweighs the size penalty:

• Good candidates: Small icons under 2–3 KB, loading spinners, decorative SVG elements, favicon substitutes in HTML emails
• Poor candidates: Photographs, large illustrations, anything over 10 KB — the 33% size penalty and the inability to cache the image separately make hosted files a better choice
• HTML emails: Many email clients block external image requests. Inlining images as Base64 ensures they display even when remote content is blocked

The content type comes from the browser, not the file extension

The data URL format is data:{contentType};base64,{data}, and the content type used here is whatever the browser's file picker reports for the selected file — not derived from the filename's extension. For most image formats (PNG, JPEG, WebP, GIF) this matches exactly what you'd expect. For SVG files, some browsers report image/svg+xml and others report text/plain depending on system MIME type configuration; if your downstream consumer requires the content type to be image/svg+xml and the data URL comes back as data:text/plain;base64,..., you may need to edit the prefix manually.

SVG images and Base64

SVG files can be embedded in CSS without Base64 encoding by URL-encoding the SVG markup directly: url("data:image/svg+xml,<svg...>"). This is often preferable to Base64 for SVGs because the URL-encoded version is smaller and the SVG markup remains human-readable. Base64 encoding is still useful for SVGs in contexts that require a Base64 data URL specifically, such as some canvas APIs or third-party libraries.