Encode an image to Base64 / Data URI

A Data URI is a URL that contains a resource's data directly instead of pointing to a remote file. Its general form is data:[<mediatype>][;base64],<data>. For an image, we typically have data:image/png;base64,iVBORw0KGgo…. The resource is embedded in the HTML, CSS or JSON and loaded without any additional HTTP request.

Common motivations:

• Reduce HTTP requests: embed an icon directly in CSS rather than loading it separately from the document
• Email signature with inline image: no risk of the image being blocked as remote content
• Web Components / Web Workers: where loading an external resource often poses a scope or CORS problem
• Local storage (LocalStorage, IndexedDB, database): serialize an avatar thumbnail into a string
• Self-contained snippets: an HTML file that is self-sufficient, without external dependencies

A few concrete contexts where Base64 image encoding is justified:

• Inline SVG icons in CSS (background-image: url("data:image/svg+xml;base64,…"))
• Custom email signatures with logo
• Rapid prototyping of a standalone page shared by email
• Standalone web components (single deployable file)
• Browser-side PDF generation (jsPDF) with embedded thumbnails
• Mock data that contains images

Three steps:

1. Upload your image (PNG, JPG, SVG, WebP, GIF) via the drop zone
2. Click "Encode"
3. Copy the resulting Data URI with the dedicated button, and paste it into your HTML, CSS or JSON

Base64 is not a silver bullet. A few precautions:

• Base64 increases size by ~33%: 4 ASCII characters for every 3 binary bytes
• Encoded images are not cached separately by the browser; they are reloaded with the HTML/CSS that contains them
• Prefer for images under 10 KB; beyond that, an external file is generally more efficient
• For SVG, prefer URL encoding (via encodeURIComponent) rather than Base64: the result is shorter and remains text-parsable
• Modern build tools (Webpack, Vite) automate the Base64 vs. external file choice via a configurable threshold size

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

What is the difference between Base64 and binary?

Binary represents a file's raw bytes. Base64 is an encoding that transforms these bytes into 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). Text contexts (HTML, JSON, email) cannot transport binary; Base64 solves this problem at the cost of a 33% size overhead.

Why is my Data URI so long?

A 30 KB image in binary becomes ~40 KB in Base64. And each character is an ASCII byte, so yes, the string is long. It's inherent to the encoding. For large images, keep an external file.

Do all browsers support Data URIs?

Yes, without exception among modern browsers (Chrome, Firefox, Safari, Edge even since IE8). Historical limits: IE8 capped at 32 KB. No more issues today on the web.

How to decode a Data URI?

Our Base64 image decoder does the reverse operation: paste your Data URI, get the image file (PNG, JPG, SVG, WebP) ready to upload or save.

Base64 vs. URL encoding for SVGs?

For SVG, URL encoding (with encodeURIComponent) produces a shorter string than Base64 and remains readable as text. It is the recommended choice in CSS when integrating an inline SVG. For binary formats (PNG, JPG), Base64 remains mandatory.

Does Base64 encoding affect image quality?

No. The encoding is lossless: it is a binary byte ↔ Base64 string bijection. The original pixels are strictly preserved. Only the size of the transported file increases by 33%.