IMAGE

Image to Base64 — Convert Images to Base64 Data URLs

Convert images to Base64 data URLs for embedding in HTML, CSS, or JSON. Runs entirely in your browser. No uploads, no accounts, no limits.

● LOCAL · EXIF NEVER UPLOADED0 network requests from tools since page load

Drop your image here

PNG, JPG, WebP, GIF, SVG, BMP (max 10MB)

You might also need

Sort Lines MD5 Hash UUID Generator JSON to CSV Base64 Encode PDF Split HAR to cURL TOML Tools .env Helper MsgPack Inspector Compress PDF PDF to EPUB

Open the encoder

Base64 encoding for images solves a specific problem: a context that accepts only text needs to carry an image. The contexts that demand this are HTML email (most email clients do not load remote images by default), CSS files (cannot reference binary data without a URL), JSON payloads (must be valid UTF-8), code comments and READMEs (binary attachments are not portable across git hosts), and inline SVG-style usage in single-file HTML exports. The encoding itself is the same Base64 used for text — every three bytes of input become four ASCII characters — but the data URL wrapper (data:image/png;base64,...) signals to the decoder which MIME type to use.

The non-obvious decision is when to use a data URL and when to use a separate file. The case for data URLs is strong for small images: a 2 KB favicon as a data URL avoids an extra HTTP request and ships with the parent document. The case against is strong for large images: a 500 KB hero image as a data URL inflates the HTML by 33% to 665 KB, cannot be cached independently by the browser, and forces the browser to decode the entire payload before rendering. The practical threshold is around 10 KB — below that, data URLs win; above that, separate files win.

For a final hand-off: if the destination is an HTML email, the data URL is usually the only way to ensure the image renders — most email clients block remote images by default. If the destination is a CSS file with a small repeating pattern or icon, the data URL keeps the styling self-contained. If the destination is a JSON API payload or a database field, the data URL is the right format — JSON cannot carry binary directly without a wrapper. If the destination is a public website with multiple pages using the same image, a separate file referenced by URL is the right call.

How to use

Drop one or more images
Drag JPG, PNG, WebP, GIF, or BMP files into the drop zone, or paste from clipboard. Each file is read locally and the Base64 encoding happens in your browser tab.
Pick an output format
Choose between a data URL (`data:image/png;base64,iVBORw0KGgo...`) for HTML/CSS embedding, raw Base64 (no prefix) for JSON or YAML payloads, or chunked output for very large images.
Copy or download the result
Copy the encoded string to your clipboard, or download as a .b64.txt file. The output preserves the source MIME type so the data URL is ready to paste into an `<img src=...>` attribute.

Frequently asked

When should I embed an image as a Base64 data URL?

For small images (icons, UI elements under 10 KB) that need to load with the parent document and avoid an extra HTTP request. For larger images, a separate file referenced by URL is better — Base64 expands the payload by 33% and the data URL cannot be cached separately by the browser.

Does the data URL preserve the image format?

Yes — the MIME type prefix matches the source format (`data:image/png;` for PNG, `data:image/jpeg;` for JPG, `data:image/webp;` for WebP, `data:image/gif;` for GIF). The browser uses the MIME type to choose the decoder, so the data URL round-trips losslessly.

What is the maximum size supported?

There is no hard limit beyond your browser tab's available memory. A 10 MB image encodes to roughly 13.3 MB of Base64 text, which most modern browsers can hold. For very large images (50 MB+), consider whether embedding as data URL is the right choice — the encoded string becomes unwieldy.

Will the data URL work in CSS?

Can I encode SVG images this way?

Yes — SVGs encode to Base64 the same way. However, SVGs are already text and can be inlined directly into HTML without the Base64 step. The Base64 form is useful when the SVG is in a CSS context or a JSON payload that expects binary-as-text encoding.

Limitations

33% size overheadBase64 always expands the input by 4/3. A 100 KB image becomes a 133 KB data URL. For large images, this is a meaningful size penalty on top of the image's natural size — and the data URL cannot be cached separately by the browser.
No decoding round-tripThis tool encodes only. To verify the output or to extract the image back, use the Base64-to-Image tool. The encoding itself is lossless and reversible — the decoded bytes are bit-identical to the source file.
Not for large imagesFor images above 100 KB, embedding as a data URL is usually the wrong choice. The HTTP request overhead is small, the data URL cannot be cached independently, and the inlined payload inflates the parent document. Use a separate image file referenced by URL.

Platform notes

macOS: Safari and Chrome both decode data URLs in `<img>` and CSS contexts. The browser tool is the right pick for converting an image to a string for a README badge, a code comment, or an inline CSS rule where hosting a separate file is not practical.
Windows: Edge and Chrome render data URLs in HTML and CSS without issue. The browser tool is the right pick for embedding small UI icons in a CSS file or a JSON manifest where a separate asset would break the deployment.
Linux: For command-line work, `base64 -w 0 image.png` produces the raw Base64. The browser tool is the right pick for adding the `data:image/png;base64,` prefix automatically, or for batch encoding multiple images at once.
Web: Runs entirely client-side. Works offline once the page has loaded. Useful for restricted environments where command-line tools are not available, or for content pasted from a chat or email that needs to become an inline asset.