Encode Image to Base64 Online

Why encode an image to Base64?

Base64-encoding an image converts its raw binary bytes into an ASCII text string that can be embedded directly inside HTML, CSS, JavaScript, JSON, or email bodies — anywhere plain text is allowed. This eliminates the need for a separate HTTP request to fetch the image file, which is useful for small icons, single-request emails, offline documents, and inline chart snapshots. The tradeoff is a ~33% size increase versus the raw binary and the fact that Base64 strings cannot be cached independently by the browser or CDN — every page that includes the same inline image re-downloads its bytes.

The canonical output is a data URI of the form data:image/png;base64,iVBORw0KG.... The data: scheme is defined in RFC 2397 and supported by every modern browser and email client (with some exceptions noted in the FAQ). The MIME type — image/png, image/jpeg, image/webp, image/svg+xml, image/gif — tells the renderer how to interpret the bytes that follow. Get this wrong and the browser refuses to display the image even though the Base64 payload itself is valid.

How this encoder works

The tool runs entirely in your browser using the native FileReader.readAsDataURL() API. When you select an image, the browser reads the file bytes locally, detects the MIME type from the file header (not just the extension), and produces a complete data: URI ready to paste. Nothing is sent to any server — the file never leaves your machine, which matters for anything sensitive like screenshots of internal dashboards, private photos, or medical imagery.

The equivalent JavaScript is short enough to inline for reference:

Browser JavaScript equivalent

const reader = new FileReader();
reader.onload = () => {
  const dataUri = reader.result;
  // dataUri is: 'data:image/png;base64,iVBORw0KG...'
  document.querySelector('img').src = dataUri;
};
reader.readAsDataURL(fileInput.files[0]);

Node.js equivalent

import { readFileSync } from 'fs';
import path from 'path';

const file = readFileSync('logo.png');
const ext = path.extname('logo.png').slice(1);
const mime = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', webp: 'image/webp', gif: 'image/gif', svg: 'image/svg+xml' }[ext];
const dataUri = `data:${mime};base64,${file.toString('base64')}`;
console.log(dataUri);

Using the Base64 image in HTML and CSS

In HTML, paste the data URI directly into an <img> src attribute — the browser treats it identically to a remote URL:

HTML inline image

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

CSS background image

.hero {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4b...');
  background-size: cover;
}

JSON payload (API response)

{
  "user": "alice",
  "avatar": "data:image/webp;base64,UklGRj..."
}

Size tradeoffs and when to skip Base64

Base64 encoding always increases size by a fixed ratio of roughly 4:3 — every 3 bytes of binary become 4 bytes of ASCII. A 30 KB PNG becomes a ~40 KB Base64 string, plus another ~22 bytes of data URI header. That penalty compounds if the image is repeated across pages: a 4 KB inline icon on ten pages is 40 KB of duplicated text your server sends over and over, versus 4 KB fetched once and cached forever from a CDN.

Rule of thumb: inline images under 4 KB, use real URLs above 10 KB, and benchmark the range in between. For SVG specifically, prefer inline <svg> source over Base64 — the source is smaller (no encoding penalty), CSS-stylable, and animatable. Base64 SVG is only useful when the SVG must appear inside a <img> tag rather than as inline markup.

Common problems and how to fix them

The image shows a broken icon in HTML. The MIME type in the data URI prefix is wrong. If you Base64-encoded a JPEG but wrote data:image/png;base64,..., browsers reject it. Always use the MIME type this tool auto-detects.

The string got line-broken when I pasted it into JSON. Base64 output is a single continuous line. If a code editor wrapped it, JSON parsers may reject the embedded newlines. Use a single-line string without \n characters, or escape them properly.

My email client stripped the inline image. Gmail, Outlook, and several corporate mail gateways strip data URIs. Use a hosted image URL or CID attachment instead — Base64 inline is not reliable for email delivery.

The Base64 string is huge. First check the source image — most photos should be JPEG at 60-75% quality, and PNGs benefit from tools like pngquant. If the source is already optimised, the image is simply too large to inline; use a real URL.

Related Base64 & Encoding Tools

• Base64 Encoder (Parent Tool) — the underlying encoder used by every variant on this page
• Base64 Encode Online — general-purpose text encoder with copy-to-clipboard
• Text to Base64 — convert plain text or UTF-8 to Base64
• Base64 Encode in JavaScript — btoa(), TextEncoder, and Buffer.from() patterns
• Base64 Encode in Python — base64.b64encode() reference and examples
• Base64 Decoder — reverse the encoding — Base64 back to text or file
• Base64 to Image Converter — decode a data URI back into a viewable image file