keptlocal
Files never leave your browser

Image to Base64

Drop an image and get the Base64 data URI instantly. Use it directly in HTML img tags, CSS backgrounds, or API payloads. Nothing is uploaded.

Drop an image here, or

JPG, PNG, WebP, GIF, SVG · Files never leave your browser.

Drop an image to get its Base64 string.

How to convert an image to Base64

  1. Drop your image into the zone above, or click to browse. JPG, PNG, WebP, GIF, and SVG are all supported.
  2. The Base64 string appears immediately in the output box. By default it shows the full Data URI (including the data:image/...;base64, prefix), which you can paste directly into HTML or CSS.
  3. Switch to Base64 only if you need the raw encoded string without the prefix — useful for API payloads and JSON fields that expect plain Base64.
  4. Click Copy to copy the string to your clipboard, or select and copy manually from the text box.

Everything runs in your browser using the FileReader API. No file is sent to a server — open DevTools (F12) → Network while converting to verify zero upload requests.

When to use Base64-encoded images

  • Inline images in HTML email templates — many email clients block externally referenced images but allow inline data URIs. Embedding logos and decorative elements as Base64 ensures they render for recipients who have remote image loading disabled.
  • CSS background images in component-scoped styles — inlining a small icon as a Base64 data URI in CSS eliminates an HTTP request. This is particularly useful for repeating patterns and small UI icons where request overhead exceeds the encoded size overhead.
  • Sending images via REST APIs and JSON payloads — some API endpoints expect image data as a Base64 string in a JSON field rather than a multipart form upload. Image recognition and OCR APIs (including Azure AI Vision, OpenAI, and Anthropic's vision models) accept Base64-encoded images directly.
  • Embedding images in SVG files — SVG supports <image> elements with Base64 data URIs as the href attribute. This produces a single self-contained SVG file with no external dependencies.
  • Prototyping without a static file server — when building HTML prototypes locally, data URIs let you reference images without setting up a server or dealing with file path issues.

Data URI vs. raw Base64: when to use each

A data URI includes the MIME type prefix: data:image/png;base64,iVBORw0KGgo.... This is the format required by HTML src and href attributes, and by CSS url() values. Paste it directly without modification.

Raw Base64 is just the encoded string without the prefix: iVBORw0KGgo.... Use this when an API or system expects the string and handles the MIME type separately — for example, the image field in an OpenAI or Anthropic API request body, or a database column that stores binary data as text.

How it works under the hood

The browser's FileReader.readAsDataURL(file) method reads the file's binary content and returns a data URI synchronously in its onload callback. The encoding is performed by the browser's native Base64 implementation — no JavaScript library is involved.

Base64 encoding works by grouping the file's bytes into sets of three (24 bits) and representing each group as four ASCII characters chosen from a 64-character alphabet (A–Z, a–z, 0–9, +, /). This increases data size by roughly 33% — a 100 KB image becomes approximately 133 KB as a Base64 string. Padding characters (=) are appended when the byte count is not divisible by three.

Limits and what to expect

  • Size overhead: Base64 adds approximately 33% to the original file size. A 500 KB image produces a ~665 KB string. For images larger than 50–100 KB, the size overhead makes Base64 embedding impractical for production web pages — the HTTP request saved is outweighed by the bloated HTML/CSS file.
  • Browser rendering: browsers handle data URIs for images well up to a few megabytes. Very large data URIs (10+ MB) can cause memory pressure in some browsers.
  • MIME type accuracy: the MIME type in the data URI (image/jpeg, image/png, etc.) comes from the file the browser reports. Renamed files with incorrect extensions may produce a mismatched MIME type — a PNG renamed to .jpg would report image/jpeg in the URI.
  • SVG and text-based formats: SVG files encode cleanly to Base64, but they can also be referenced as inline SVG or URL-encoded in CSS. Base64 is slightly larger than URL encoding for SVG.
  • Browser support: Chrome 90+, Firefox 90+, Safari 15+, Edge 90+.

Privacy: what happens to your file

Your image is read into browser memory using the FileReader API and encoded locally. Nothing is sent to a server. The Base64 string is displayed in your browser and copied to your clipboard — the data never leaves your device.

For confidential images — proprietary product photos, medical imaging, or any image you would prefer not to expose to a third-party server — this architecture provides complete local processing.

Frequently asked questions

Are my images uploaded to a server?
No. Base64 encoding uses the FileReader API in your browser. Your image never leaves your device.
What is Base64 and why is it useful?
Base64 is a way to represent binary data (like an image) as a string of ASCII characters. This lets you embed images directly in HTML, CSS, or JSON without a separate file reference — useful for email templates, inline styles, API payloads, and eliminating HTTP requests for small images.
How do I use the output in HTML?
Use it as the src attribute: <img src="data:image/png;base64,iVBOR...">. The data URI includes the MIME type prefix automatically.
How do I use it in CSS?
Use it as a background-image value: background-image: url('data:image/png;base64,iVBOR...'). Works in all modern browsers.
Are there size limits?
Large images produce very long strings. Browsers handle them fine, but very large Base64 strings (several MB) embedded directly in HTML can slow page loads — Base64 is best suited for small images like icons and logos.