Image to Base64 Converter

What it does

This tool turns an image into Base64 text and a ready-to-paste data URI. A data URI embeds the image directly in HTML, CSS, Markdown, JSON or an email, so the page needs one fewer HTTP request and the snippet works without hosting a separate file. It also works in reverse: paste Base64 or a data URI to preview the image and download it.

How to use

1. Drop an image on the drop zone, press Choose image, or press Sample to load an SVG logo.
2. The preview shows the image with its type, file size, Base64 size and dimensions.
3. Pick an Output format:
   • Data URI: data:image/png;base64,…, for src attributes and JSON.
   • Base64 only: the bare string, optionally wrapped at 76 characters for MIME and PEM-style use.
   • CSS background: a complete background-image: url("…"); declaration.
   • HTML <img>: an image tag with the data URI as src.
   • Markdown: ![image](data:…).
4. Copy the result. To decode instead, paste Base64 or a data URI into the input box and press Download image.

Example

A 2×1 pixel PNG becomes:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Used in CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

When to inline images

Inlining helps for small, frequently used images such as icons, tiny backgrounds, loading spinners and email signatures. It is a poor fit for photos and large graphics: Base64 adds about a third to the size, the image can’t be cached separately from the page or stylesheet, and it delays the rest of the file from parsing. As a rule of thumb, keep inlined images under a few kilobytes. For SVG, a percent-encoded data URI (data:image/svg+xml,…) is often smaller than Base64, and the tool accepts both.