Image to Base64

What is Image to Base64?

Image to Base64 converts an image file into a Base64-encoded data URL — a self-contained string that encodes the complete image data in ASCII text. Instead of a separate file hosted on a server, the image is embedded directly in HTML, CSS, or JSON as a string. The browser decodes and renders it without making any additional HTTP request. This tool runs entirely in your browser: the image bytes are read locally and converted using the browser's built-in APIs without ever being sent to any server.

What is a data URL?

A data URL is a URI scheme that encodes file content inline. Its format is data:[mediatype];base64,[data]. For example, a small PNG icon becomes data:image/png;base64,iVBORw0KGgo.... This string can be used anywhere a regular URL can: in an <img src="..."> attribute, a CSS background-image: url(...) value, or a JSON field in an API payload. The browser decodes the Base64, recovers the binary image data, and renders it exactly as it would a hosted image file.

How to use this tool

1. Click Choose File and select an image (PNG, JPG, GIF, SVG, WebP, or any browser-displayable format).
2. The Base64 data URL is generated automatically and displayed in the output.
3. Copy the full data URL string.
4. Paste it directly into an img src attribute, CSS url(), or any other context that accepts a URL.

When to use inline Base64 images

Base64 encoding increases data size by approximately 33% compared to the original binary file. This tradeoff is only worthwhile for small images where the saved HTTP request outweighs the size penalty:

• Good candidates: Small icons under 2–3 KB, loading spinners, decorative SVG elements, favicon substitutes in HTML emails
• Poor candidates: Photographs, large illustrations, anything over 5 KB — the 33% size penalty and the inability to cache the image separately make hosted files a better choice
• HTML emails: Many email clients block external image requests. Inlining images as Base64 ensures they display even when remote content is blocked

SVG images and Base64

SVG files can be embedded in CSS without Base64 encoding by URL-encoding the SVG markup directly: url("data:image/svg+xml,<svg...>"). This is often preferable to Base64 for SVGs because the URL-encoded version is smaller and the SVG markup remains human-readable. Base64 encoding is still useful for SVGs in contexts that require a Base64 data URL specifically, such as some canvas APIs or third-party libraries.