Convert an Image to Base64 Online Free [2026]

What Base64 encoding actually is

Image files are binary data: sequences of bytes representing pixel colors, metadata, and compression information. HTML, CSS, JSON, and email are text formats. They were not designed to carry raw binary data.

Base64 solves this problem by converting every 3 bytes of binary data into 4 printable ASCII characters drawn from a 64-character alphabet (A–Z, a–z, 0–9, +, /). The result is a string that text-based formats can safely carry without corruption — because every character in it is a printable ASCII character with no special meaning in HTML, CSS, or JSON.

When you embed a Base64-encoded image in an HTML document, the browser decodes the string back into binary data in memory and displays the image — without making a network request for a separate image file. This is the core reason developers use Base64 image encoding: to eliminate HTTP requests.

What a Data URI looks like

A Data URI combines the Base64-encoded bytes with a MIME type prefix so the browser knows the data type:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

This is a 1x1 transparent PNG expressed as a Data URI. The three parts are: the scheme data:, the MIME type image/png;base64, and the encoded payload after the comma. The browser parses this the same way it parses a URL — except the data is embedded rather than fetched.

When to use Base64 images: the honest answer

Base64 inlining is a genuine performance optimization in a narrow set of circumstances. Here are the cases where it makes sense:

• Small, frequently used UI assets (under 5 to 10KB). Icons, spinners, decorative SVGs, small checkmark images — assets that appear on every page and change rarely. Inlining them in the CSS eliminates one HTTP request per icon. Below about 2KB, the encoding overhead is negligible and the saved round-trip is a net win.
• HTML email with remote image blocking. Many email clients (Outlook, Apple Mail with privacy settings, corporate email) block externally hosted images by default. A logo or banner encoded inline as Base64 displays even when remote images are blocked. Keep total HTML size under the email client limits (typically 100 to 200KB).
• Single-file HTML deliverables. When you are generating a standalone HTML report, a self-contained email template, or a snapshot document that must contain all its assets inline — so it displays correctly when opened from disk without internet access. Reporting tools, audit exports, and generated invoices often use this pattern.
• API payloads and JSON data structures. When passing images through an API that accepts JSON, Base64 is often the required format. Vision AI APIs (including many LLM multimodal endpoints) accept images as Base64 strings in JSON request bodies. This is a data transport use case, not a performance one.
• CSS custom cursors and loading spinners. Browser CSS allows custom cursors via cursor: url('data:...'). Inlining the cursor image prevents a flash of the default cursor while the cursor image loads. Same logic applies for CSS loading spinners: inline the image to eliminate the load delay.

When NOT to use Base64: the +33% problem

Base64 encoding inflates file size by approximately 33% compared to the binary original. This is not a limitation of the tool — it is a mathematical property of the encoding: 3 binary bytes become 4 ASCII characters, which is a 4/3 ratio, or 33.3% overhead.

For a 200KB JPEG, inlining it as Base64 in your HTML produces a 267KB string embedded in the HTML document. That bloat has two compounding consequences:

• No independent browser cache. A standalone image file can be cached by the browser with a long Cache-Control: max-age header. After the first visit, the browser serves it from disk. An inlined Base64 string lives inside the HTML document — when the HTML changes, the entire document re-downloads, including the re-encoded image bytes.
• Larger initial payload = slower Time to First Byte and LCP. A large Base64 blob in your HTML or CSS bloats the document download, delays parsing, and postpones the Largest Contentful Paint. This is the opposite of what image optimization should accomplish.
• CDN and compression are less effective. Binary image files compressed with Brotli or Gzip shrink dramatically. A Base64 string also compresses, but the 33% overhead makes the starting point much larger. The CDN cannot serve the image file independently from the HTML if it is inlined.

The exception is email: in HTML email, the total document size limit matters more than caching concerns, because emails are not cached like web pages. Even in email, keep Base64-inlined images to the absolute minimum necessary.

How the browser encodes images without uploading

The SammaPix Image to Base64 tool uses the FileReader API — a standard browser API that reads local files into memory without any network request. Here is the exact sequence:

1. You drop a file onto the tool or click to browse. The browser creates a File object pointing to the local file. No data has moved yet — the File object is just a reference.
2. FileReader.readAsDataURL() is called on the File object. This is the key API. It reads the binary file data, encodes it as Base64, and prepends the Data URI prefix with the MIME type — all in memory, with no network I/O.
3. The onload event fires with the result. The FileReader result property contains the complete Data URI string. The tool extracts this and displays it in the output field.
4. The output is formatted according to the selected mode. Plain Base64 strips the data:[type];base64, prefix. Data URI keeps the full string. CSS wraps it in background-image: url('...'). HTML wraps it in an <img> tag with the appropriate attributes.
5. You copy the output and paste it into your code. No file was transmitted anywhere. The entire operation happened in your browser tab.

The FileReader API has been part of the HTML5 standard since 2012 and is supported in every modern browser including Chrome, Safari, Firefox, and Edge. It is the same API used by browser-based file editors, image processors, and drag-and-drop upload interfaces — except here the file data never leaves the browser because there is no upload step.

Output formats: plain, Data URI, CSS, HTML

The tool provides four output modes, each optimized for a different integration target:

How to encode an image to Base64, step by step

The full process takes under 30 seconds:

1. Go to sammapix.com/tools/image-to-base64 in any modern browser. No account or signup required.
2. Drop your image or click to browse. Supported formats include JPEG, PNG, WebP, GIF, SVG, and AVIF. The file is read locally — nothing is transmitted.
3. Select your output mode. Choose Plain Base64, Data URI, CSS, or HTML depending on where you will paste the result.
4. Click Copy. The encoded string is copied to your clipboard. It is ready to paste directly into your editor, template, or API request.
5. Paste and test. If you used the HTML or CSS mode, paste the snippet into your markup and open the page in a browser to confirm the image renders correctly inline.

Using Base64 in CSS background-image

The CSS output mode produces a ready-to-use background-image declaration. Paste it into any CSS rule:

.icon-check {
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

This pattern is most effective for small UI icons that are used across many components. By embedding the icon in the CSS, you avoid one HTTP request per icon and ensure the icon loads at the same time as the stylesheet, with no flash of missing icon on first render.

For SVG images, the CSS pattern is even more efficient. SVG is a text-based format and can sometimes be embedded directly (without Base64 encoding) using URL-encoded SVG. However, Base64-encoding SVG is simpler, more broadly supported, and avoids the escaping complexity of URL-encoding.

If you need to convert an SVG file to a rasterized PNG before encoding (for compatibility with older email clients or browsers), use SammaPix SVG to PNG first, then encode the PNG output to Base64 with this tool.

Embedding Base64 in HTML email

Inline Base64 images are one of the few reliable techniques for making images appear in HTML email when remote image loading is disabled. The HTML output mode produces a complete img tag:

<img
  src="data:image/png;base64,iVBORw0KGgo..."
  alt="Company logo"
  width="120"
  height="40"
/>

Practical guidelines for Base64 images in email:

• Keep total email HTML under 100KB. Gmail, Outlook, and Apple Mail clip emails exceeding approximately 102KB. A single large Base64 image can push a transactional email over this limit.
• Always include width and height attributes. Email clients do not run JavaScript. Without width and height, images in emails collapse to zero dimensions until fully loaded.
• Some spam filters flag large Base64 blobs. Inlining a large image can trigger spam scoring in aggressive filters. Keep Base64 images small (under 20KB encoded) and supplement with alt text.
• Test in actual email clients before sending. Outlook desktop, Gmail web, Apple Mail, and mobile clients each handle Base64 differently. What renders correctly in one may not in another.

JavaScript snippet: encode any image in the browser

If you are building your own tool or need to encode images programmatically in JavaScript, the FileReader API is two dozen lines:

/**
 * Encode a File or Blob to a Base64 Data URI.
 * Runs entirely client-side — no network request.
 */
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result); // Data URI string
    reader.onerror = reject;
    reader.readAsDataURL(file); // Triggers the encode
  });
}

// Usage with a file input:
document.querySelector('#fileInput').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const dataUri = await fileToBase64(file);
  console.log(dataUri);
  // → "data:image/png;base64,iVBORw0KGgo..."

  // Strip the prefix to get plain Base64:
  const base64Only = dataUri.split(',')[1];
  console.log(base64Only);
  // → "iVBORw0KGgo..."
});

The readAsDataURL method does the encoding. The reader.result on the onload event is the complete Data URI. Splitting on the comma gives you the plain Base64. No library required. No upload. This is exactly what the SammaPix tool does under the hood.

Inline Base64 vs external file: honest performance comparison

The right choice between inlining an image as Base64 and serving it as a separate file depends on the image size, change frequency, and how many pages it appears on:

How to verify no upload happens (DevTools)

You can verify that the tool is genuinely client-side in under two minutes:

1. Open DevTools. Press F12 (Windows/Linux) or Command Option I (Mac).
2. Go to the Network tab and clear existing requests. Make sure the tab is recording.
3. Drop your image into the tool. Watch the Network panel during the drop and encoding.
4. Observe: no outgoing requests during encoding. The only requests visible are the initial static page assets (JavaScript, CSS) loaded when you first opened the tool. No request carries your image file to any server. The encoding happens entirely in memory.

This is the definitive check. Tools that actually upload your file will show a POST or PUT request to their server during the drop or encode step. You will see none here because the FileReader API does not make network requests.

Related tools

• Image to Base64: the tool this article covers. Encode and decode. Four output modes. No upload.
• SVG to PNG: rasterize an SVG to PNG before encoding. Useful when the target (email client, older browser) does not support SVG Data URIs. See the SVG to PNG developer guide.
• ICO Generator: generate a multi-size ICO favicon from a PNG. ICO files are often the source image for Base64 favicon embedding. See the favicon best practices guide.
• Compress Images: reduce image file size before encoding to Base64. Smaller binary = smaller Base64 string = less overhead in your document. Always compress before encoding when file size matters.