Stax

Image to Base64 Converter

Convert any image to Base64 or Data URI instantly.

🖼️
Drop an image here or click to browse
PNG, JPG, GIF, WebP, SVG — any image format

What Base64 image encoding is used for

Base64 image encoding is a technique used in web development to inline images directly into HTML, CSS, and JavaScript files. Instead of linking to an external image file, you embed the entire image as a text string, eliminating an HTTP request and making the resource completely self-contained.

Two output formats explained

  • Data URI — includes the MIME type prefix (e.g., data:image/png;base64,...). Use this directly in HTML src attributes, CSS background-image: url(...), or email templates.
  • Pure Base64 — the raw encoded string without any prefix. Use this when an API or database field expects only the Base64 data and not the full Data URI.

How to use Base64 images in HTML and CSS

  • HTML img tag: <img src="data:image/png;base64,ABC..." />
  • CSS background: background-image: url('data:image/png;base64,ABC...');
  • Email HTML: Inline images in emails avoid broken image issues when images are blocked by mail clients.

Frequently asked questions

What is Base64 encoding for images?
Base64 encoding converts binary image data into a string of ASCII characters. This lets you embed an image directly inside HTML, CSS, or JSON without needing a separate file. The encoded string is about 33% larger than the original binary file.
What is a Data URI?
A Data URI (data URL) is a complete image reference embedded as a string. It has the format: data:[mediatype];base64,[base64data]. You can use it directly in the src attribute of an <img> tag, as a CSS background-image value, or anywhere a URL is accepted.
Is my image uploaded to a server?
No. This tool runs entirely in your browser using the FileReader API. Your image is never sent to any server. It is read and converted locally, making this tool safe to use with sensitive or private images.
Why is the Base64 output larger than the original image?
Base64 encodes every 3 bytes of binary data into 4 ASCII characters, resulting in approximately 33% size overhead. For example, a 100 KB image will produce roughly 133 KB of Base64 text. This is the inherent cost of representing binary data as text.
When should I use Base64 images vs regular image files?
Use Base64 for small icons, logos, or images that are part of a CSS/HTML file to save an HTTP request. Avoid Base64 for large images — the size overhead and lack of browser caching make it slower than serving a regular image file. A common rule of thumb: use Base64 only for images under 5–10 KB.

Related tools